代码仅供学习,主要的地方都写上注释了,写的不好请大佬们指出,谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片懒加载</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
.container li {
float: left;
margin: 10px 10px;
}
.container li img {
width: 310px;
height: 206px;
}
</style>
<body>
<div>
<ul class="container" style="overflow: hidden">
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
<li><img src="" data-src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"></li>
</ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$.fn.extend({
lazyImg: function () {
var promise = {
// 监听滚动事件
bind: function ($target, $c) {
var me = this,
timer = null,
interval = 100;
$(window).on('scroll', function(e){
timer && clearTimeout(timer);// 优化滚动的时候重复执行滚动事件
timer = setTimeout(function(){
me.checkShow($target, $c);
}, interval);
});
},
// 检测是否展示图片
checkShow: function ($target, $c) {
var me = this;
$target.each(function () {
var $cur = $(this);
if (me.isShow($cur, $c)) {
setTimeout(function () {
me.showImg($cur);
},300);
}
});
},
// 判断是否在可视窗口内
isShow: function ($el, $c) {
var scrollH = $c.scrollTop(),
winH = $c.height(),
top = $el.offset().top;
if (top < winH + scrollH) {
if ($el.data('isLoaded') === true) {// 判断是否已经加载,加载则不用重复调用
return false;
} else {
$el.data('isLoaded', true)
// console.log(scrollH+winH, top);
return true;
}
}else{
return false;
}
},
// 展示图片
showImg: function ($el) {
$el.attr('src',$el.attr('data-src'));
}
}
var $imgs = this;
this.$c = $(window);
this.$target = $imgs;
promise.checkShow(this.$target, this.$c);// 初始化时判断一次
promise.bind(this.$target, this.$c);
return this;
}
})
$('img').lazyImg();// 调用格式
</script>
</body>
</html>