×

【jQuery插件】图片延迟加载之jQuery.lazyload

作者:Terry2014.12.25来源:Web前端之家浏览:15859评论:2
关键词:JQuerylazyload

pc-b107dc52-2db4-11e4-954d-000c29f61318.png

在我们做项目过程中,可能会遇到图片多、加载慢,以及设计很花哨的页面,比如产品展示、专题活动。此类页面需要用到很多图片,页面长,这样的页面未做处理的话,在浏览器打开的时候往往会很卡,性能比较差,因为一次性需要加载很多图片,如果不解决这个问题,产品那边很难通过,严重影响了用户体验。为了解决这个问题,我也搜索了一些方法,发现有一款插件可以专门解决图片延迟加载问题。

插件名:jQuery.lazyload,下载压缩包,请猛戳这里:点击下载

解压压缩包,我们可以引用jquery和jquery.lazyload.js到你的页面,如下:

<script src="js/jquery-1.11.0.min.js"></script>【经测试,1.72版本以上都可以】
<script src="js/jquery.lazyload.js"></script>

html图片调用方法

为图片加入样式lazy  图片路径引用方法用data-original,代码如下:

<ul class="ulbox">   
    <li><img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"></li>   
    <li><img class="lazy" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"></li>   
    <li><img class="lazy" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"></li>   
    <li><img class="lazy" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"></li>   
    <li><img class="lazy" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"></li>   
    <li><img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"></li>   
</ul>

JS函数调用

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

 在图片中也可以不使用 class="lazy",初始化时使用:

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

这样会对页面上所有图片都会起作用,我们可以看情况来设定。

如果想提载入图片,可以使用 threshold 进行设置,如下:

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

以上实例的含义是:在图片距离屏幕180px时提前载入。

短短的几行代码就可以提升我们页面的性能,从而提高用户体验。了解完上面的使用方法,我们可以看下案例,请猛戳:DEMO

还有一点差点忘记了,这个插件的兼容问题,它目前基本兼容主流浏览器:

总结

上面只是jQuery.lazyload的应用,其原理后面会再抽时间分析下。并且这个插件只是针对图片,以后有时间可以探讨下数据延时加载的知识以及瀑布流的插件。

缺点:在jQuery动画页面应用中,比如偏复杂的opacity动画、视觉差动画,本人测试过,不太适合

如果你有好的方法,可以一起探讨。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/jQuery-lazyload.html

网友评论文明上网理性发言 已有2人参与

发表评论:

评论列表