Lazyload长页面图片的延迟加载:
一,jquery.lazyload.js
注意事项:jquery.js务必先引进,然后才加载lazyload;img长宽一定要有,每幅长宽可以不一致;在js段,可以不用$(window).ready来加载事件;
1.将图片路径写入data-original属性
2.给lazyload的图片增加一个名为lazy的class
3.选择所有要lazyload的图片(img.lazy),执行lazyload();
下面举例说明:
//注意js引入的先后顺序
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
<img class="lazy" data-original="img/example.jpg" width="1330" height="900">
<img class="lazy" data-original="img/example.jpg" width="400"height="200"> //可以尺寸不一致
...//无数张你想要加载的照片
<script>
//开始全局加载
$(function(){
$("img.lazy").lazyload();
})
</script>
比较常用的方法
提前加载——Threshold
lazyload默认是当滚动到该图片位置时,加载该图片。但是可以通过设置Threshold参数来实现滚到距离其xx px时就加载。
1 2 3 4 5 | //自行就加载了 < br data-filtered="filtered">$(function(){ $("img.lazy").lazyload({ threshold :20 }); }) |
或
1 2 3 4 5 | $(window).ready(function(){ $("img.lazy").lazyload({ threshold :20 }); }) |
事件触发(可以是jquery事件,也可以是自定义事件)——Event
当触发定义的事件时,图片才开始加载
1 2 3 4 5 | //使图片点击后,才开始加载< br data-filtered="filtered">$(function(){ $("img.lazy").lazyload({ event : "click" }); }) |
同时也可以
1 2 3 4 5 6 7 8 9 10 11 12 | //自定义延迟多长时间再触发加载图片。这个类似EasyLazyload.js插件,下面会介绍到 $(function() { $("img.lazy").lazyload({ event : "sporty" }); }); $(window).bind("load", function() { var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000); }); |
设定效果——Effects
1 2 3 4 | //插件默认的加载效果是 show() ,你可以使用任何你想要的效果。比如fadeIn()淡入效果 $("img.lazy").lazyload({ effect : "fadeIn" }); |
滚动容器内的图片——container
1 2 3 4 5 6 7 8 9 10 11 | <!--滚动容器内的图片。下面的div拥有scrollerbar,内容的内容进行滚动,滚到图片位置时,图片开始加载--> < br data-filtered="filtered">< div style="height:600px;overflow:scroll" id="container"> < img class="lazy" data-original="img/example.jpg" alt="" style="margin-top:1000px" height="200"> < img class="lazy".../> </ div > < script > $(function(){ $("img.lazy").lazyload({< br data-filtered="filtered"> effect:"fadeIn",//顺便添加个效果 container: $("#container") }); }) </ script > |
二,EasyLazyload.js
比较全能的延迟加载,不会对样式有影响,最主要可以不用特意去设定图片的width和height(毕竟图片不一致的宽高大有人需要,难不成还真的一个一个去设定?)而且scroll到照片时,有缓冲视觉效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!--先引入Easylazyload.js--> < script src="jquery.min.js"></ script > < script src="EasyLazyload.min.js" > < div id="container" style=" overflow:scroll; background-color:black;"> <!--把你想要的图片来源src换成data-lazy-src--> < img data-lazy-src="img/1.png"> < img data-lazy-src="img/2.png"> < img data-lazy-src="img/3.png" > < img data-lazy-src="img/4.png" > < img data-lazy-src="img/5.png" > </ div > < script > //调用全局方法lazyLoadInit() lazyLoadInit({ coverColor:"white",//图片即将显示时覆盖层的颜色; coverDiv:"< h1 >test</ h1 >",//覆盖层可显示的土自定义组件 offsetBottom:0,//图片距离屏幕底部出现时间点的距离差值(注解:延迟加载图片会在图片顶部接触屏幕底部时出现,如果想要让图片顶部距离屏幕底部有一定距离时出现,请设置此值) offsetTopm:0,//图片距离屏幕底部出现时间点的距离差值(注解:同上,距离顶部) showTime:1100, onLoadBackEnd:function(i,e){ console.log("onLoadBackEnd:"+i); }//图片已经完全出现时的回调函数,参数为(index,event)加载的图片下标,以及dom对象(dom对象为jquerydom或zeptodom对象) ,onLoadBackStart:function(i,e){ console.log("onLoadBackStart:"+i); }//图片已经下载完成,即将开始显示时的回调函数(参数同上) }); </ script > |
关于Easylazyload.js的几个问题
如果是从服务器上请求一系列图片,lazyLoadInit()应该放在哪里触发?在ajax调用成功后 img的src替换完成后 调用 lazyLoadInit lazyLoadInit()方法,ajax给img赋值data-lazy-src属性,然后在ajax success 中调用Init方法,不然初始化的时候img的src属性还是空的;
用瀑布流ajax动态加载的图片没有效果,在ajax里的complete方法中调用lazyLoadInit()试试
三,自己用js编写不依赖jquery
当然很多大神考虑到页面性能的分析和处理力度做到最大化,以及用户滚动到页面底部之前而懒加载的无智能精准提前加载。比如我读到的设计无限滚动下拉加载,实践高性能页面真谛。 非常值得一看和学习。