万户资源科技
万汇资源微信公众号

微信扫码有惊喜!

jquery 延迟加载 jquery.lazyload.js用法

chenjie 2016-01-15 技术

jquery.lazyload.js是jquery写的一个延迟加载图片的插件

在浏览器可视区域外的图片不会被加载,直到滚动条到图片位置,才会被加载。

在网页中有很多图片的长页中,可以提高网页加载速度,还可以减轻服务器负担。

首先在页面头部引用:

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

然后执行:

<script>
$(function() {
    $("img.lazy").lazyload();
});
</script>

放图片时写上必须的4个属性width,height,class=lazy,data-original="",src中可以放一个非常小的动态加载图片(可选):

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

此时便大功告成。

lazyload有几种属性可以参考:

<script>
$(function() {
    $("img.lazy").lazyload({
        'failure_limit':'5',    //容差范围,在可视区域外最靠前的5张也图会被加载
        'threshold' : '200',    //临界值,在距离可视区域200像素的非可视区域的图片会被加载
        'event' : 'click',        //点击触发
        'effect' : 'fadeIn'         //使用淡入特效
    });
});
</script>


文章关键词
延迟加载
jquery.lazyload
qq qq tel
服务热线:

134-1954-9128