jquery之图片懒加载（总结）

懒加载：
   Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.

      在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.

懒加载使用：

1.先在页面引入jquery.js 和lazyload.js（注意引入顺序）

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

2.先给需要懒加载的图片添加类名， 例如class=“lazy”;图片地址必须放在data-original属性上，不必写src属性，进行图像插件捆绑。代码如下：

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

3.最后调用执行lazyload()函数；

<script type="text/javascript"> 
    $("img.lazy").lazyload();  
</script> 

可以设置懒加载的触发事件：

     懒加载默认的是，srcoll事件触发，页面滚动的时候，当图片出现在视野中时加载，不滚动不加载；有时候我们需要当页面加载完成时，不用滚动，立即执行加载显示图片，这时候我们就可以给懒加载绑定“sporty”事件，代码如下：

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

$(window).bind("load", function() {
    var timeout = setTimeout(function(){$("img.lazy").trigger("sporty")},2000);//2秒后自动加载图片
});   　　

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

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

可以使用加载效果：

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

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

参考链接：http://www.w3cways.com/1765.html