jQuery延迟加载(懒加载)插件 jquery.lazyload.js

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它能够延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含不少大图片长页面中延迟加载图片能够加快页面加载速度. 浏览器将会在加载可见图片以后即进入就绪状态. 在某些状况下还能够帮助下降服务器负担.

 

如何使用：

Lazy Load 依赖于 jQuery. 请将下列代码加入HTML的结尾，也就是</body>前:

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

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

你必须改变图片的标签。图像的地址必须放在data-original属性上。给懒加载图像一个特定的class（例如:lazy）。这样你能够很容易地进行图像插件捆绑。代码以下：

<img class="lazy" src="lazy.jpg" alt="" width="640" height="480" data-original="img/example.jpg" />

<script type="text/javascript">

$(function() {

    $("img.lazy").lazyload();

});

</script>

 

设置临界点:

默认状况下图片会出如今屏幕时加载. 若是你想提早加载图片, 能够设置threshold 选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提早加载.

<script>
    $("img.lazy").lazyload({

    threshold : 200

});
</script>

 

设置事件来触发加载:

你可使用jQuery事件，例如click和mouseover。也可使用自定义事件，如sporty、foobar默认状况下是要等到用户向下滚动而且图像出如今视口中时。只有当用户点击它们才加载图片：

<script>
    $("img.lazy").lazyload({

    event : "click"

});
</script>

 

使用特效:

默认状况下，插件等待图像彻底加载并调用show()。你可使用任何你想要的效果。下面的代码使用fadeIn （淡入效果）。

 

<script>
    $("img.lazy").lazyload({

    effect : "fadeIn"

});
</script>

 

针对不启用JavaScript的状况:

几乎全部浏览器的 JavaScript 都是激活的. 然而可能你仍但愿能在不支持 JavaScript 的客户端展现真实图片. 当浏览器不支持 JavaScript 时优雅降级, 你能够将真实的图片片断在写 <noscript> 标签内.

<img class="lazy" data-original="img/example.jpg"  width="640" heigh="480">

<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

能够经过 CSS 隐藏占位符.

.lazy {

    display: none;

}

在支持 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符显示出来, 这能够在插件初始化的同时完成.

$("img.lazy").show().lazyload();

 

当图像不连续时:

滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认状况下在找到第一张不在可见区域的图片时中止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 可是在一些布局中, 这样的假设是不成立的. 不过你能够经过 failurelimit 选项来控制加载行为.

$("img.lazy").lazyload({

    failure_limit : 10

});

将 failurelimit 设为 10 ，令插件找到 10 个不在可见区域的图片时才中止搜索. 若是你有一个猥琐的布局, 请把这个参数设高一点.

 

加载隐藏的图片:

可能在你的页面上埋藏可不少隐藏的图片. 好比插件用在对列表的筛选, 你能够不断地修改列表中各条目的显示状态. 为了提高性能, Lazy Load 默认忽略了隐藏图片. 若是你想要加载隐藏图片, 请将 skip_invisible 设为 false

$("img.lazy").lazyload({ 

    skip_invisible : false

});