以前用过几次,今天又看到了就整理了下来。
插件在用户滚动页面到图片之后才进行加载,对于有较多的图片的网页,
使用图片延迟加载,能有效的提高页面加载速度。
注意事项:
需要真正实现图片延迟加载,必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同,则只是一个特效而已,并不达到延迟加载的功能。
使用方法:
1. 载入 JavaScript 文件
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
2. 修改 HTML 代码中需要延迟加载的 IMG 标签
<!--将真实图片地址写在 data-original 属性中, 而 src 属性中的图片换成占位符的图片(例如 1x1 像素的灰色图片或者 loading 的 gif 图片)
添加 class="lazy" 用于区别哪些图片需要延时加 载,当然你也可以换成别的关键词,修改的同时 记得修改调用时的 jQuery 选择器
添加 width 和 height 属性有助于在图片未加载时 占满所需要的空间-->
<img class="lazy" src="grey.gif" data- original="example.jpg" width="640" height="480">
3. 调用 Lazy Load
$('img.lazy').lazyload();
参数说明: