说明:jquery.lazyload.js是基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载。
对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度。

注意:需要真正实现图片延迟加载,必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同,则只是一个特效而已,并不达到延迟加载的功能

最新版的jquery.lazyload.js已经不再是伪延迟加载了

使用方法如下:

一、载入JavaScript文件

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

二、修改HTML代码中需要延迟加载的IMG标签

// class="lazy" 说明要加载的img
// src="grey.gif" 先加载一个小图片
// data-original="example.jpg" 真实的图片路径
<img class="lazy" src="grey.gif" data-original="example.jpg" width="640" height="480">

三、调用lazyload

$(function() {
    $("img.lazy").lazyload();
});

四、常用属性

$(function() {
    $("img").lazyload({
        threshold : 200 //设置灵敏度,表示进入显示区域还有200像素就开始加载
        effect : "fadeIn" //使用淡入特效
        failure_limit : 10 //容差范围,一定要设置此值,原因说明请参考原文档
        container: $("#container") //使用父容器,父容器的CSS样式至少应包含"height: 600px;overflow: scroll;"两个属性
        event : "click" //修改触发事件为单击
    });
});

英文文档:http://www.appelsiini.net/projects/lazyload

中文文档:http://code.ciaoca.com/jquery/lazyload/

Leave a comment