图片懒加载使用方法及感受

对前端而言，提高网页的加载速度非常重要。众所周知，图片是最吃流量的。我们都知道的优化技巧是页面加载时只加载首屏页面用到的图片即可，其他的图片资源可以稍后再加载。有一款jquery的lazyload插件便是一个可以实现图片延迟加载的插件，在用户触发某个条件之后再加载对应的图片资源，这对网站的打开速度有很大提升。

插件的使用方法很简单（依赖jquery）：引入lazyload.js（压缩版才4KB）
对我们想要延迟加载的图片添加lazy样式，用”data-original” 替换图片的引用路径

<!-- 对img标签使用 -->
<img class="lazy" data-original="img/example.jpg">
<!-- 延迟加载元素的背景图 -->
<div class="lazy" data-original="img/bg.jpg">
    ...
</div>

在JS文件中调用lazyload()方法，具体例子如下。

$().ready(function(){
    //可任意选择你想延迟加载的目标元素，例如直接使用样式名lazy作为选择条件
    $("img .lazy").lazyload({
         placeholder : "img/grey.gif", //占位图
         effect: "fadeIn", // 加载效果
         threshold: 200, // 提前加载
         event: 'click',  // trigger
         container: $("#container"),  //指定容器
         failurelimit : 5 // 发生混乱时的hack手段
    })
})

参数的具体说明如下：

参数	作用	说明
placeholder	占位图片	图片路径值,图片加载时占位图自动隐藏
effect	图片载入时动画效果	值有show(直接显示),fadeIn(淡入),slideDown(滑入)等jq常用效果
threshold	提前开始加载高度	数字值,是离需要加载目标的高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,避免用户看到图片加载过程
event	图片加载trigger	值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…)
container	指定容器	lazyload默认在滚动浏览器滚动条时生效,这个参数可以让你在滚动某DIV的滚动条时执行懒加载
failurelimit	提高稳定性	若是某一张该被加载的图片未能正确加载，则加载其后的第N张图

好了，lazyload就说到这里，这里是演示地址。是我司官网下面的一个小网页，为了各位能看到延迟加载的实际效果，暂时没做提前加载的优化，延迟加载效果还是很明显的，抓紧时间看吧，说不定过几天网站就又改版了。（或者我被扣工资了！）