插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js
插件：图片懒加载
jquery.lazyload.js 2016-3-31
插件说明：http://www.w3cways.com/1765.html （小插件，好用）
下载地址:
https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js
https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script><!-- 图片懒加载 -->
<!-- <script src="/common/js/jquery.lazyload.min.js"></script>-->
<script type="text/javascript">
$(function(){
//先检测再使用(检测 lazyload 是否被引入)
if(typeof ($(window).lazyload)=='function'){
$("img[data-original]").lazyload({ //例: <img data-original="1.jpg">
//placeholder : "images/loading.gif",
effect: "fadeIn"
});
}else{
//if( window.navigator.userAgent.indexOf("Chrome") !== -1 ){
console.log('lazyload.js未被引入');
//}
}
});
</script>
<style>
img{display:block;margin-bottom:10px;border:0px;}
.div1{height:1800px;}
</style>
<div class="div1">用这个div撑出高度，在这个div之下的图片，只有在屏幕滚屏到这里后，才会显示。</div>
<img data-original="images/bg10m_20.jpg" class="">jquery.scrollLoading.js 2016-3-31
http://www.zhangxinxu.com/wordpress/?p=1259
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="/common/js/jquery.scrollLoading.js"></script><!-- 图片懒加载 -->
<script type="text/javascript">
$(function(){
//先检测再使用(检测 scrollLoading 是否被引入)
if(typeof ($(window).scrollLoading)=='function'){
$(".lazy").scrollLoading({
attr:'dynamic-src'
});
}else{
//if( window.navigator.userAgent.indexOf("Chrome") !== -1 ){
console.log('scrollLoading.js未被引入');
//}
}
});
</script>
<div class="div1">用这个div撑出高度，在这个div之下的图片，只有在屏幕滚屏到这里后，才会显示。</div>
<img dynamic-src="images/bg10m_20.jpg" class="lazy">图片懒加载
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
//图片懒加载
var waterfull = {
init: function(col) {
window.onscroll=this.throttle(this.isScroll);
this.isScroll();//初始化
},
isScroll:function(){
//console.log("isScroll");
var _height=parseInt($(window).height());
var _srcoll=parseInt($(window).scrollTop());
var _sTop=_height+_srcoll;
//var _sTop=_height+_srcoll-360;//减一行的高度
var imgs=$("img[data-src]");
var e;
var li_top;
for(var i=0;i<imgs.length;i++){
e=$(imgs[i]);
li_top = e.parents("li").offset().top;
if(li_top<_sTop){//判断li的top小于(屏幕+滚动高)的高度，即加载
if(e.attr("src").length===0){
e.attr("src",e.attr("data-src"));
}
//if(e.attr("src").indexOf("dd.jpg")>0){ e.attr("src",e.attr("data-src")); }
}
}
},
throttle: function(fn){
var timer = null;
var _this=this;
return function(){
var context = _this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context,args)}, 150);
};
}
}
waterfull.init( $("#ul_shoplist"));//图片懒加载
});
</script>
<style type="text/css">
#main{margin:0 auto;width:1100px;}
ul,li{list-style:none;margin:0;padding:0;}
li{float:left;width:360px;;border:1px solid #000;}
img{width:360px;height:360px;}
</style>
</head>
<body>
<div >
<ul >
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b229c200719.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b229c200719.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b1f7a1e7a28.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b1f7a1e7a28.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad13d74493a.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad13d74493a.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad0d105c4a6.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad0d105c4a6.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad2ef165946.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad2ef165946.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b229c200719.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b229c200719.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b1f7a1e7a28.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b1f7a1e7a28.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad13d74493a.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad13d74493a.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad0d105c4a6.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad0d105c4a6.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad2ef165946.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad2ef165946.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b229c200719.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b229c200719.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b1f7a1e7a28.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b1f7a1e7a28.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad13d74493a.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad13d74493a.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad0d105c4a6.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad0d105c4a6.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad2ef165946.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad2ef165946.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b229c200719.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b229c200719.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b1f7a1e7a28.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b1f7a1e7a28.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad13d74493a.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad13d74493a.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad0d105c4a6.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad0d105c4a6.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad2ef165946.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad2ef165946.jpg"></a></li>
</ul>
</div>
</body>
</html>