【jQuery插件】图片延迟加载之jQuery.lazyload - Web前端

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

插件名：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动画、视觉差动画，本人测试过，不太适合。

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