jquery lazyload是一款基于jquery框架的图片延迟加载应用，它可以让用户访问页面的时候只显示当前屏幕所示的图片。原理为利用JS替换图片src为loading图片，新data-original属性放置图片地址，scroll事件触发JS把src重新换成图片的真实地址。
一. 如何使用
threshold : 0,
failure_limit : 0,
event : “scroll”, //触发事件
effect : “show”, //显示方式
container : window, //容器
data_attribute : “original”, //属性
skip_invisible : true,
appear : null,
load : null, placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
1. threshold：
临界值，这个值是针对container容器的，即距离container容器视口的临界值，就是用来提前加载的。
如： $(“img”).lazyload({ threshold : 200 });当距离图片还有200像素的时候，就开始加载图片。
2. event：
事件，container容器默认绑定scroll这个事件，在这个事件被触发时，会不断的判断img元素是否满足触发appear的条件， 因此当浏览器不停的滚动下来时，如果满足条件，则显示图片；
另外还有一点，如果这个事件不是scroll事件，则选中的img元素都会绑定这个事件，绑定的这个事件中同样会触发内部appear事件；
3. effect：
显示方法，默认为show，也可以设置为fadeIn，API中隐藏了一个配置属性effectspeed，动画运行的时间
4. data_attribute: "original“
img元素的一个data属性，用于存放图片的真实地址
5. skip_invisible: true
true:不加载隐藏的不可见图像，false:为加载，如:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery.lazyload</title> <style> .cont{ width:640px; height:300px; overflow: scroll; position:relative; } .cont img{ width:640px; } </style> </head> <body> <div class="cont"> <img data-original="img/1.jpg" style="display:none" /> <img data-original="img/2.jpg" /> <img data-original="img/3.jpg" /> <img data-original="img/4.jpg" /> <img data-original="img/5.jpg" /> <img data-original="img/6.jpg" /> </div> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/jquery.lazyload.min.js"></script> <script> $(function(){ $("img").lazyload({"container":".cont","skip_invisible":false}); }); </script> </body> </html>
6. placeholder
图片占位符，img元素默认src属性为1*1像素的透明图片
7. appear: null
在img触发appear事件时执行的回调
8. load: null
在img触发load事件时执行的回调
9. failure_limit: 0
循环查找 img，根据 HTML 文档的布局从上往下查找,0表示当找到第一个并未显示/加载的 img 时,就会停止往下查找.
如果找到的是第 failure_limit 个img元素，且不在container视口上方，左方及视口内（可以允许在视口下方，右方），则中断循环。如：
$(“img”).lazyload({ failure_limit : 10 }); 表示插件找到 10 个不在可见区域的图片是才停止搜索。
注： float 和 position 造成图片排序换乱时，才会有作用
三.其他
1.jquery lazyload可以做延时，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>延时加载-jquery.lazyload</title> <style> .cont{ width:640px; height:300px; overflow: scroll; position:relative; } .cont img{ width:640px; } </style> </head> <body> <div class="cont"> <img data-original="img/1.jpg" /> <img data-original="img/2.jpg" /> <img data-original="img/3.jpg" /> <img data-original="img/4.jpg" /> <img data-original="img/5.jpg" /> <img data-original="img/6.jpg" /> </div> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/jquery.lazyload.min.js"></script> <script> $(function() { $("img").lazyload({ event : "sporty" }); }); $(window).bind("load", function() { var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000); }); </script> </body> </html>
2.tab加载
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab-jquery.lazyload</title> <style> .nav span{ background:#ccc; display:inline-block; width:80px; height:40px; line-height:40px; text-align:center; cursor:pointer; } .nav span.on{ background:#eee; } .cont{ width:640px; height:300px; } .cont-item{ width:640px; height:300px; overflow: scroll; } .cont img{ width:640px; } .cont .cont-item:nth-child(2){ display:none; } </style> </head> <body> <div class="nav"> <span class="on">1</span> <span>2</span> </div> <div class="cont"> <div class="cont-item"> <img data-original="img/1.jpg" height="574" width="765" /> <img data-original="img/2.jpg" height="574" width="765" /> <img data-original="img/3.jpg" height="574" width="765" /> </div> <div class="cont-item"> <img data-original="img/4.jpg" height="574" width="765" /> <img data-original="img/5.jpg" height="574" width="765" /> <img data-original="img/6.jpg" height="574" width="765" /> </div> </div> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/jquery.lazyload.min.js"></script> <script> $(function(){ $(".cont-item").eq(0).find("img").lazyload({"container":".cont-item"}); $(".nav span").click(function(){ var t = $(this); var inx = t.index(); if(t.hasClass("on")){ return; }else{ t.addClass("on").siblings("span").removeClass("on"); $(".cont-item").eq(inx).show().siblings(".cont-item").hide(); $(".cont-item").eq(inx).find("img").lazyload({"container":".cont-item"}); } }); }); </script> </body> </html>