jquery.lazyload(图片延迟加载)的使用

jquery.lazyload.js是一个JS编写的JQ插件，用于延迟加载长页面的图片，常见的比如：典型的瀑布流模式、商品列表页面等。在浏览器区域之外的图片将不被加载，直到用户滚动到它所在的位置或者满足它的某个条件。

使用方法：

它是一个JQ插件，必须和Jqury一起使用：

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

<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
$(function() {
    $("img.lazy").lazyload();
});

说明：class标注需要延迟加载的图片，data-original保存图片的路径（不是src）， 必须设置图片的宽高，否则插件无法使用。

在.lazyload();里面设置参数，设定延迟加载的方法。如：

$("img.lazy").lazyload({
    threshold : 200
});

说明：默认是屏幕出现图片位置时加载，threshold:200，设置在图片距离屏幕区域200像素时就加载图片。（实现提前加载）

$("img.lazy").lazyload({
    event : "click"
});

说明，为加载图片添加点击事件。（支持其他的事件）

$("img.lazy").lazyload({
    effect : "fadeIn"
});

说明：effect 设置效果。

$("img.lazy").lazyload({ 
    skip_invisible : false
});

说明：默认不是不加载隐藏图片，设置skip_invisible:false，可加载隐藏图片。

优雅降级：

几乎所有浏览器的 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();

图片在容器里面：

在特定的容器里面延迟加载图片，可将图片的容器定义为JQery对象，作为参数传到初始化方法里面，如：

<div id="container">
    <div id="inner_container">
        <img class="lazy" data-original="img/pic1.jpg" width="500" height="300" alt="" src="img/pic1.jpg">
        <img class="lazy" data-original="img/pic2.jpg" width="500" height="300" alt="" src="img/pic2.jpg">
        <img class="lazy" data-original="img/pic3.jpg" width="500" height="300" alt="" src="img/pic3.jpg" >
        <img class="lazy" data-original="img/pic4.jpg" width="500" height="300" alt="" src="img/pic4.jpg" >
    </div>
</div>

$("img.lazy").lazyload({
    container: $("#container")
});

当图片不连续时：

$("img.lazy").lazyload({
    failure_limit : 10
});

说明：将 failurelimit 设为 10 ，令插件找到 10 个不在可见区域的图片时才停止搜索. 如果你有一个个性的布局, 可以把这个参数设高一点.

兼容性：最新版本的插件已经在 OSX 的 Safari 5.1, Safari 6, Chrome 20, Firefox 12 浏览器上, Windows 的 Chrome 20, IE 8 and IE 9 浏览器上, 以及 iOS5 (iPhone 和 iPad) 的 Safari 5.1 浏览器上测试过