插件：图片懒加载
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 id="main"> <ul id="ul_shoplist"> <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>
