jquery之图片懒加载（总结）

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

懒加载使用：

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

1
2
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
2.先给须要懒加载的图片添加类名， 例如class=“lazy”;图片地址必须放在data-original属性上，没必要写src属性，进行图像插件捆绑。代码以下：

1
<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
3.最后调用执行lazyload()函数；

1
2
3
<script type="text/javascript">
    $("img.lazy").lazyload(); 
</script>
能够设置懒加载的触发事件：

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

1
2
3
4
5
6
7
8
9
$(function() {
    $("img.lazy").lazyload({
        event : "sporty"
    });
});
<a href="www.wfqcp.com/" class="lightblue">潍坊长途汽车站</a> 
 
$(window).bind("load", function() {
    var timeout = setTimeout(function(){$("img.lazy").trigger("sporty")},2000);//2秒后自动加载图片
});   <em id="__mceDel" style="background-color: #ffffff; font-family: verdana, Arial, Helvetica, sans-serif; font-size: 14px">　　</em>