简介
lazyload.js用于长页面图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载，这是与预加载相反的。
优点
它可以提高页面加载速度；
在某些情况下它也可以帮助减少服务器负载。
安装
通过bower或npm安装：
$ bower install jquery.lazyload
$ npm install jquery-lazyload
使用
lazyload依赖与jquery。所以先引入jquery和lazyload
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
1.将图片路径写入data-original属性
2.给lazyload的图片增加一个名为lazy的class
3.选择所有要lazyload的图片（img.lazy），执行lazyload();
<img class="lazy" data-original="img/example.jpg" style="margin-top:1000px" height="200">
<script>
$(function(){
$("img.lazy").lazyload();
})
</script>
注意：必须设置图片的高度或者宽度，否则插件可能无法正常工作，不过也可以把宽度和高度的样式写在外部的style文件里。
提前加载——Threshold
lazyload默认是当滚动到该图片位置时，加载该图片。但是可以通过设置Threshold参数来实现滚到距离其xx px时就加载。
$(function(){
$("img.lazy").lazyload({
threshold :20
});
})
上面的例子设置了滚动到距离图片20px时，图片就开始再开始加载。
事件触发(可以是jquery事件，也可以是自定义事件)——Event
当触发定义的事件时，图片才开始加载：
$(function(){
$("img.lazy").lazyload({
event : "click"
});
})
上面的例子使图片点击后，才开始加载。
Tip:你可以使用这个来实现图片的延迟加载：
$(function() {
$("img.lazy").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {
$("img.lazy").trigger("sporty")
}, 5000);
});
上面的代码在页面加载完毕后五秒才开始加载图片。
设定效果——Effects
插件默认的加载效果是 show() ,你可以使用任何你想要的效果。下面的代码使用了 fadeIn()：
$("img.lazy").lazyload({
effect : "fadeIn"
});
滚动容器内的图片——container
插件也可以使用在滚动容器内的图片上。下面的div拥有scrollerbar，内容的内容进行滚动，滚到图片位置时，图片开始加载：
<div style="height:600px;overflow:scroll" id="container">
<img class="lazy" data-original="img/example.jpg" alt="" style="margin-top:1000px" height="200">
</div>
<script>
$(function(){
$("img.lazy").lazyload({
container: $("#container")
});
})
</script>
不顺序排列的图片
1.插件会执行一个寻找未加载图片的循坏，该循环会检查图片是否可见，默认情况下，当第一个视图外的图片被找到，循环就会停止 。
2.但是存在一种情况：页面布局图片的顺序和html图片代码的顺序不一致;它会导致本该加载的没有加载。这种情况下就可以将 failurelimit 设为 10 ，它令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个恶心的布局, 请把这个参数设高一点。
$("img.lazy").lazyload({
failure_limit : 10
});
处理隐藏图片——skip_invisible
为了提升性能，插件默认忽略隐藏的图片；如果想要加载隐藏图片.设置skip_invisible为false
注意：Webkit浏览器将自动把没有宽度和高度的图像视为不可见
$("img.lazy").lazyload({
skip_invisible : true
});
参数设置汇总
$("img.lazy").lazyload({
placeholder : "img/grey.gif", //用图片提前占位
// placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
effect: "fadeIn", // 载入使用何种效果
// effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold: 200, // 提前开始加载
// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
event: 'click', // 事件触发时才加载
// event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
container: $("#container"), // 对某容器中的图片实现效果
// container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
failurelimit : 10 // 图片排序混乱时
// failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lazy Load Enabled</title>
<style>
img{
width: 100%;
height: 100%;
}
div{
width: 50%;
overflow: hidden;
height: 40vw;
float: left;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div><img class="lazy" data-original="http://img4.imgtn.bdimg.com/it/u=436658439,1777372933&fm=26&gp=0.jpg" alt="" title="1"></div>
<div><img class="lazy" data-original="http://img0.imgtn.bdimg.com/it/u=2471845590,913308006&fm=26&gp=0.jpg" alt="" title="1"></div>
<div><img class="lazy" data-original="http://img3.imgtn.bdimg.com/it/u=3504862428,266217873&fm=26&gp=0.jpg" alt="" title="1"></div>
<div><img class="lazy" data-original="http://img3.imgtn.bdimg.com/it/u=199516788,1211161719&fm=26&gp=0.jpg" alt="" title="1"></div>
<div><img class="lazy" data-original="http://img0.imgtn.bdimg.com/it/u=1037286717,3978071743&fm=26&gp=0.jpg" alt="" title="2"></div>
<div><img class="lazy" data-original="http://img4.imgtn.bdimg.com/it/u=436658439,1777372933&fm=26&gp=0.jpg" alt="" title="3"></div>
<div><img class="lazy" data-original="http://img2.imgtn.bdimg.com/it/u=1639064767,1093774507&fm=26&gp=0.jpg" alt="" title="4"></div>
<div><img class="lazy" data-original="http://img4.imgtn.bdimg.com/it/u=436658439,1777372933&fm=26&gp=0.jpg" alt="" title="1"></div>
<div><img class="lazy" data-original="http://img0.imgtn.bdimg.com/it/u=2471845590,913308006&fm=26&gp=0.jpg" alt="" title="1"></div>
<div><img class="lazy" data-original="http://img3.imgtn.bdimg.com/it/u=3504862428,266217873&fm=26&gp=0.jpg" alt="" title="1"></div>
<div><img class="lazy" data-original="http://img3.imgtn.bdimg.com/it/u=199516788,1211161719&fm=26&gp=0.jpg" alt="" title="1"></div>
<div><img class="lazy" data-original="http://img0.imgtn.bdimg.com/it/u=1037286717,3978071743&fm=26&gp=0.jpg" alt="" title="2"></div>
<div><img class="lazy" data-original="http://img4.imgtn.bdimg.com/it/u=436658439,1777372933&fm=26&gp=0.jpg" alt="" title="3"></div>
<div><img class="lazy" data-original="http://img2.imgtn.bdimg.com/it/u=1639064767,1093774507&fm=26&gp=0.jpg" alt="" title="4"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
</script>
</body>
</html>
lazyload.min.js下载
/*! Lazy Load 1.9.3 - MIT license - Copyright 2010-2013 Mika Tuupola */
!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("<img />").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);
网友评论