jQuery插件Lazyload的使用

(转载)jQuery插件Lazyload的使用

如果网页包含大量图片，那么，采用Lazyload来延迟图片的载入以加速网页整体在浏览器中的载入是个不错的方法！

上面这句话并不是翻译来的，只是我想一句话说完。

下面开始吧：

1.在页面头部加载jQuery和这个Lazyload插件，如果已经加载过了jQuery，那就不用再次加载了：

    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>   
    <script src="jquery.lazyload.js" type="text/javascript"></script>   

是的，我习惯在国内用又拍云的云加速。

对图片的处理：

    <img class="lazy" src="img/grey.gif" data-original="img/true_image.jpg"  width="730" heigh="300">   

上面示例中的grey.gif实际上相当于一个占位符，建议采用1*1px的灰色png或者gif，data-original后面的才是真正的图片链接，class="lazy"是个可以定义的特定class。
Lazyload基本设置

    <script type="text/javascript" charset="utf-8">   
        $(function() {   
            $("img.lazy").lazyload();   
        });   
    </script>  

Lazyload基本设置的在线DEMO:Lazyload DEMO1
对不支持js浏览器的处理

    <img class="lazy" src="img/grey.gif" data-original="img/true_image.jpg"  width="730" heigh="300">   
    <noscript><img src="img/true_image.jpg" width="730" heigh="300"></noscript>  

用CSS隐藏占位符：

    .lazy {   
      display: none;   
    }  

对支持js的浏览器，应该在DOM准备阶段就初始化插件：

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

当然了，这样处理兼容性更好，不过现在的浏览器大多都是支持js的。
加载敏感度

默认的情况下，图片将会在出现在屏幕上时显示，如果想提载入图片，可以使用 threshold 进行设置，下例的含义是：在图片距离屏幕180px时提前载入：

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

占位图片

可以自定义一个简单的浅色或灰色系的小图片（越小越好，1*1px最佳，格式推荐采用gif）作为占位图片来触发加载动作。
事件触发

可以是jQuery的任何事件（如click、mouseover），还可以使用自己定义的事件。

例如：处于等待状态, 直到浏览者滚动到窗口中图片所在位置，在占位图片被点击之前不加载图片, 可以这样做:

    $("img").lazyload({   
        placeholder : "img/grey.gif",   
        event : "click"  
    });  

 特效的使用

当图片完全加载的时候，默认使用show()方法来显示图片，所以，上面的那个基本设置示例中未写出show(),但是可以照常运行。
 图片淡入（FadeIn）效果

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

Lazyload图片淡入效果演示
将图片放在特定容器中

先看示例：水平滚动演示页面和垂直滚动的演示页面

CSS部分示例

    #container {   
        height: 600px;   
        overflow: scroll;   
    }  

js部分示例

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

 图片未按顺序排列的情况

滚动页面的时候，Lazyload会按照在HTML代码中的顺序先后可视范围内的加载图片，在第一张不在可视范围内的图片处停止执行，但是在某些页面布局中，这种聪明的假设可能是不成立的，那么可以用failurelimit来控制加载动作：

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

上面的意思是：在找到10张不在可视范围内的图片时停止执行。额，好吧，如果你的页面布局猥琐到10不足以满足的时候，那就再大一些吧。
Lazyload定时延迟图片载入

Lazyload的一个并不完备的功能，并不影响使用，但是实际用途并不大！用途描述：在页面和可见图片载入后一定时间内载入图片。Lazyload定时延迟图片载入示例

    $(function() {             
        $("img:below-the-fold").lazyload({   
            event : "sporty"  
        });   
    });   
    $(window).bind("load", function() {    
        var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);   
    });  

上例中采用的参数或者说定时是5秒。
 加载隐藏的图片

你的页面上可能隐藏了很多不可见的图片用作特殊用途，Lazyload默认是忽略这些图片的，如果不想忽略掉，可以这样：

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

 
 Lazyload下载与兼容性

最新的未压缩版 source与压缩版 minified。

你看到这篇文章时可能有更新的版本了，请点击Lazyload了解更多！

兼容于：

OSX平台： Safari 5.1, Safari 6, Chrome 20, Firefox 12

WIN平台：Chrome 20, IE 8 and IE 9 on Windows

iPhone和 iPad上：Safari 5.1