lazyload 延迟加载
0 前言
现在在做手机移动端的网站,因为是电商类,因此会有各种各样的图片,老大对于这么多图片的加载表示十分不爽,于是在各种探索可以延迟加载图片啊什么的方法,于是jquery.lazyload.js就映入眼帘了。
github : https://github.com/tuupola/jquery_lazyload
1 用法
jquery.lazyload.js 是基于jquery的,这里是从github上面下载下来的demos,分享在度盘了 http://pan.baidu.com/s/1eQkXSNC
简单写几个例子:默认的延迟加载、设定区域延迟加载、自定义事件延迟加载等,我觉得这样的组合基本上就差不多够用了,更多的功能看看demo研究一下应给问题不大~
1.1 准备工作
1.1.1 js库
首先当然了,jquery.js和jquery.lazyload.js都得有吧~? 前者在网上找就好,不过笔者学习的时候用的1.4.2 ; 后者直接去网盘分享里面扒就是了~
1.1.2 图片
嗯,多准备一些图片有备无患啊,最好是每行一张的条件下能够多出浏览器可视范围很多,这样貌似能更好的观察效果啊~
1.2 html代码
话不多说,直接放代码,这段html代码基本上就不会变了
<!DOCTYPE html> <html> <head> <title>lazyload的测试</title> <meta charset="utf-8" /> </head> <body> <div id="pics1"> <img data-original="img/1.jpg" alt="pic1-1" height="200" width="640" /><br /> <img data-original="img/2.jpg" alt="pic1-2" height="200" width="640" /><br /> <img data-original="img/3.jpg" alt="pic1-2" height="200" width="640" /><br /> <img data-original="img/3.png" alt="pic1-3" height="200" width="640" /><br /> <img data-original="img/1.png" alt="pic1-4" height="200" width="640" /><br /> <img data-original="img/2.png" alt="pic1-5" height="200" width="640" /><br /> </div> <div id="pics2"> <img data-original="img/4.jpg" alt="pic2-1" height="200" width="640" /><br /> <img data-original="img/4.png" alt="pic2-1" height="200" width="640" /><br /> <img data-original="img/5.jpg" alt="pic2-2" height="200" width="640" /><br /> <img data-original="img/5.png" alt="pic2-2" height="200" width="640" /><br /> </div> <!-- 这里留着用来写不同的js代码,以后的代码就放在这里 --> </body> </html>
很明显,img标签中没有我们熟悉的src属性,取而代之的是 data-original属性,这个属性就是lazyload库用来延迟处理图片文件时所用的属性了,【绿字可不看: 这个data-original属性当然是可以改的,只要改lazyload的源码就好了。。。
嗯,html代码打算一共展示10张图片,并且用br换行,为了演示更多的效果,将图片分为了2组,分别用两个div包裹了起来
每个img标签设置了height和width属性,这个对于延迟加载来说是很有用的,自己加上跟去掉,尝试一下效果就好了,这里我们先带着。
嗯,html就到这里,接下来是对lazyload的各种探索了~
1.3 各种延迟加载的尝试
首先需要说的是,貌似这个插件曾经做的是“假延迟”,据说仍然是全部将图片加载完之后再控制前台的显示,不过这个版本不是这个样子,插件到底什么时候加载了图片,可以用各种浏览器的开发工具查看,例如chrome的network标签
就是说明一种检验的方法,要不然我怎么知道它到底是不是延迟加载了呢。。。以下开始正式尝试。
1.3.1 默认的延迟加载
嗯,仍然是直接放代码
<script src="jquery-1.4.2.min.js" ></script> <script src="jquery.lazyload.min.js" ></script> <script> $('img').lazyload(); </script>
嗯,这里只是简单的选取了所有img标签,然后调用lazyload方法,于是,你就可以打开chrome的network页面,访问这个页面了,你会发现只请求了页面可见范围左右的图片,而且还有一堆data:image……的请求,这些请求是lazyload插件默认的图片占位符,其实表示的就是一张图片了,有兴趣的话可以该lazyload代码换成自己想要的小图片代码
然后往下拉动浏览器滚动条,你会逐渐发现浏览器在逐个的请求页面下方的图片文件,这就是最简单的默认延迟加载。
1.3.2 加上加载效果的延迟加载
<script src="jquery-1.4.2.min.js" ></script> <script src="jquery.lazyload.min.js" ></script> <script> $('img').lazyload({ effect : 'fadeIn' }); </script>
加了一个effect的属性值,其他同上,只是当图片出现的时候会有一个淡入的效果
1.3.3 设定区域延迟加载
这大概是一种加速页面显示很容易想到的思路,比如先让用户可见部分加载,再让首先不可见的部分加载,最后再让其他很不重要的地方的图片慢慢加载【绿字可不看: 我觉得对于这个问题应该是有更好的处理方式,不过这里就拿lazyload解决了
<script src="jquery-1.4.2.min.js" ></script> <script src="jquery.lazyload.min.js" ></script> <script> $('#pics1 img').lazyload({ effect : 'fadeIn' }); </script>
与前面的区别仅仅是选择器不同而已,相信看了这个效果大家就会各种选择区域设置不同的加载场景了。
1.3.4 设定事件延迟加载
<script src="jquery-1.4.2.min.js" ></script> <script src="jquery.lazyload.min.js" ></script> <script> $('#pics2 img').lazyload({ effect : 'fadeIn', event : 'waitforcall' }); setTimeout(function(){ $('#pics2 img').trigger('waitforcall'); },5000); </script>
这里在lazyload里加了一个event属性,而这个事件名称完全是自己起的,然后在接下来的脚本里面使用了一个延迟函数,5s后让pics2这个div中的图片们触发“waitforcall”事件,效果就是5s后让这些图片加载并淡入效果显示。
应该指出的是,既然使用的trigger来触发,那么即使这些图片不在当前可视范围内,也会在5s后加载。
有了这个示例,大概对于如何使用lazyload来处理整个页面图片的加载,加快页面显示速度,大家可能就会有一些想法了