图片延迟加载
jQuery插件:jQuery.lazyload
参数:
$(function(){ $('img.lazy').lazyload({ //container: $('.product-list'), // 对指定标签对象内的图片实现效果,表示在此标签中滚动时,触发加载(注意:如果容器未设置height和overfload:auto,那么会默认加载所有图片) threshold: 100, //当图片顶部距离显示区域还有100像素时,就开始加载 placeholder : "img/grey.gif", // 图片未加载时,占位 effect: "slideDown", // 图片出现的效果,值有show(直接显示),fadeIn(淡入),slideDown(下拉) effect_speed: 1000, // 效果出现的时间 event: 'scroll', // 滚动滚轮时触发,可以是:click、mouseover等 data_attribute: 'original', // img标签中保存url的自定义属性,默认:data-original skip_invisible: true, // 是否跳过已经隐藏的图片(display:none) failure_limit: 2, // 由于延迟加载是根据Dom从上到下执行 // 如果遇到Dom位置在上,但是图片定位在下导致看不到,那么会以为之后的图片不在应用延迟加载 // 此处的failure_limit用于限制如果出现N个【Dom位置在上,但是图片定位在下】才终止 appear: function(){ // 当图片位置刚出现在视图时,触发此事件 $(this).attr('src'); }, load: function(){ // 当图片路径加载之后,触发此事件 $(this).attr('src'); } }); })
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0 auto; } .pg-header{ height: 48px; background-color: #3b5998; } .w{ width: 980px; margin: 0 auto; } .clearfix:after{ clear: both; content: '.'; visibility: hidden; height: 0; display: block; } .product-list .item{ float: left; height: 240px; width: 184px; overflow: hidden; border: 1px solid red; padding: 5px; } .product-list .item .lazy{ height: 200px; width: 184px; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-body"> <div class="w"> <div class="product-list clearfix"> <div class="item"> <img class="lazy" data-original="img/1.png"/> </div> <div class="item"> <img class="lazy" data-original="img/2.png" /> </div> <div class="item"> <img class="lazy" data-original="img/3.png"/> </div> <div class="item"> <img class="lazy" data-original="img/4.png"/> </div> <div class="item"> <img class="lazy" data-original="img/5.png"/> </div> <div class="item"> <img class="lazy" data-original="img/6.png" /> </div> <div class="item"> <img class="lazy" data-original="img/7.png"/> </div> <div class="item"> <img class="lazy" data-original="img/8.png"/> </div> <div class="item"> <img class="lazy" data-original="img/9.png" /> </div> <div class="item"> <img class="lazy" data-original="img/10.png" /> </div> <div class="item"> <img class="lazy" data-original="img/11.png"/> </div> <div class="item"> <img class="lazy" data-original="img/12.png"/> </div> <div class="item"> <img class="lazy" data-original="img/13.png"/> </div> <div class="item"> <img class="lazy" data-original="img/14.png" /> </div> <div class="item"> <img class="lazy" data-original="img/15.png" /> </div> <div class="item"> <img class="lazy" data-original="img/16.png" /> </div> <div class="item"> <img class="lazy" data-original="img/17.png" /> </div> <div class="item"> <img class="lazy" data-original="img/1.png"/> </div> <div class="item"> <img class="lazy" data-original="img/2.png" /> </div> <div class="item"> <img class="lazy" data-original="img/3.png"/> </div> <div class="item"> <img class="lazy" data-original="img/4.png"/> </div> <div class="item"> <img class="lazy" data-original="img/5.png"/> </div> <div class="item"> <img class="lazy" data-original="img/6.png" /> </div> <div class="item"> <img class="lazy" data-original="img/7.png"/> </div> <div class="item"> <img class="lazy" data-original="img/8.png"/> </div> <div class="item"> <img class="lazy" data-original="img/9.png" /> </div> <div class="item"> <img class="lazy" data-original="img/10.png" /> </div> <div class="item"> <img class="lazy" data-original="img/11.png"/> </div> <div class="item"> <img class="lazy" data-original="img/12.png"/> </div> <div class="item"> <img class="lazy" data-original="img/13.png"/> </div> <div class="item"> <img class="lazy" data-original="img/14.png" /> </div> <div class="item"> <img class="lazy" data-original="img/15.png" /> </div> <div class="item"> <img class="lazy" data-original="img/16.png" /> </div> <div class="item"> <img class="lazy" data-original="img/17.png" /> </div> <div class="item"> <img class="lazy" data-original="img/1.png"/> </div> <div class="item"> <img class="lazy" data-original="img/2.png" /> </div> <div class="item"> <img class="lazy" data-original="img/3.png"/> </div> <div class="item"> <img class="lazy" data-original="img/4.png"/> </div> <div class="item"> <img class="lazy" data-original="img/5.png"/> </div> <div class="item"> <img class="lazy" data-original="img/6.png" /> </div> <div class="item"> <img class="lazy" data-original="img/7.png"/> </div> <div class="item"> <img class="lazy" data-original="img/8.png"/> </div> <div class="item"> <img class="lazy" data-original="img/9.png" /> </div> <div class="item"> <img class="lazy" data-original="img/10.png" /> </div> <div class="item"> <img class="lazy" data-original="img/11.png"/> </div> <div class="item"> <img class="lazy" data-original="img/12.png"/> </div> <div class="item"> <img class="lazy" data-original="img/13.png"/> </div> <div class="item"> <img class="lazy" data-original="img/14.png" /> </div> <div class="item"> <img class="lazy" data-original="img/15.png" /> </div> <div class="item"> <img class="lazy" data-original="img/16.png" /> </div> <div class="item"> <img class="lazy" data-original="img/17.png" /> </div> </div> </div> </div> <div class="pg-footer"></div> <script src="js/jquery-1.12.4.js"></script> <script src="js/jquery.lazyload.js"></script> <script> $(function(){ $('img.lazy').lazyload({ //container: $('.product-list'), // 对指定标签对象内的图片实现效果,表示在此标签中滚动时,触发加载(注意:如果容器未设置height和overfload:auto,那么会默认加载所有图片) threshold: 100, //当图片顶部距离显示区域还有100像素时,就开始加载 placeholder : "img/grey.gif", // 图片未加载时,占位 effect: "slideDown", // 图片出现的效果,值有show(直接显示),fadeIn(淡入),slideDown(下拉) effect_speed: 1000, // 效果出现的时间 event: 'scroll', // 滚动滚轮时触发,可以是:click、mouseover等 data_attribute: 'original', // img标签中保存url的自定义属性,默认:data-original skip_invisible: true, // 是否跳过已经隐藏的图片(display:none) failure_limit: 2, // 由于延迟加载是根据Dom从上到下执行 // 如果遇到Dom位置在上,但是图片定位在下导致看不到,那么会以为之后的图片不在应用延迟加载 // 此处的failure_limit用于限制如果出现N个【Dom位置在上,但是图片定位在下】才终止 appear: function(){ // 当图片位置刚出现在视图时,触发此事件 $(this).attr('src'); }, load: function(){ // 当图片路径加载之后,触发此事件 $(this).attr('src'); } }); }) </script> </body> </html>
源码下载:猛击这里
![](https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_Warning.png)