jq demo 简单的图片懒加载效果

时间：2020-12-09 04:20:53

重点：在元素进入可视区域后，把图片元素的 _src 的值，赋值给 src

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

div{ margin-top:300px; width:470px; height:150px; border:1px #000 solid;}

</style>

<script src="jquery-1.11.1.js"></script>

<script>

$(function(){

	toChange();

	function toChange(){

		$('img').each(function(i,elem){

			if($(elem).offset().top<$(window).height()+$(window).scrollTop()){

				$(elem).attr('src',$(elem).attr('_src'));

			}

		});

	}

	$(window).scroll(toChange);

});

</script>

</head>

<body>

<div><img _src="img/1.jpg"></div>

<div><img _src="img/2.jpg"></div>

<div><img _src="img/3.jpg"></div>

<div><img _src="img/4.jpg"></div>

<div><img _src="img/5.jpg"></div>

</body>

</html>

　　

相关文章