前端性能优化—图片懒加载

一、定义

所谓的懒加载是指想看就加载，不想看就不加载，也就不必请求。比如在访问一个包含很多图片的页面时，有些图片可能在下面，当我们进入页面但没有滑动下去或没看完整个页面，那么下面的图片就"没用"，加载了也白加载，而且还降低了网页的加载速度。因此用懒加载能当滚动到可视区域时才加载当前的图片。图片的懒加载可以提高前端性能，图片在需要的时候才加载，减轻服务的负担，提高页面的加载速度，能够减少带宽。

二、原理

图片的加载是由src的值引起，当对src赋值时浏览器就会请求图片资源，基于这个，可以利用html5属性data-xxx来保存图片的路径，当我们需要加载图片的时候才将data-xxx的值赋予src，这样就能实现图片的按需加载，即懒加载。

三、懒加载的实现方式

1、使用 jquery-lazyload.js
（1）在html中引入 jquery 和 jquery-lazyload.js

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

（2）改变图片的标签，不使用src属性，因为使用src属性后就会默认发送请求请求图片，使用data-original代替，并使用特定的class="lazy"

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

（3）添加jquery代码

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

（4）jquery-lazyload参数配置
threshold：设置threshold参数来实现滚到距离其xx px时就加载

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

placeholder：代表某一图片路径，此图片用来占据将要加载的图片的位置，待图片加载时，占位图则会隐藏，比如放一些等待加载的图片来优化用户体验效果

$(function() {
     $("img.lazy").lazyload({
        placeholder: "images/loading.gif"
    });
})

event：触发定义的事件时，图片才开始加载（此处click代表点击图片才开始加载，还有mouseover，sporty，foobar

$(function(){
    $("img.lazy").lazyload({
        event : "click"
    });
})

effects：图片显示时的效果，默认是show

$(function(){
    $("img.lazy").lazyload({
        effects:"fadeIn"
    });
})

container：其值为某容器的id或class值，lazyload默认在拉动浏览器滚动条时生效，这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片

$(function(){
    $("img.lazy").lazyload({
        container: $("#container") 
    });
 })

failure_limit：一般用于当页面中图片不连续时使用，滚动页面的时候， Lazy Load 会循环为加载的图片。在循环中检测图片是否在可视区域内，插件默认情况下在找到第一张不在可见区域的图片时停止循环，但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况，failurelimit意在加载N张可见区域外的图片，以避免出现这个问题

$(function(){
    $("img.lazy").lazyload({
        failure_limit: 20     //这里设为20表示插件找到 20 个不在可见区域的图片时才停止搜索
    });
})

skip_invisible：为了提升性能，插件默认忽略隐藏的图片；如果想要加载隐藏图片，设置skip_invisible为false

$(function(){
    $("img.lazy").lazyload({ 
        skip_invisible : false
    });
})

（5）针对不启用JS的情况：几乎所有浏览器的 JavaScript 都是激活的。然而可能你仍希望能在不支持 JavaScript 的客户端展示真实图片。当浏览器不支持 JavaScript 时优雅降级,，你可以将真实的图片片段写在 <noscript> 标签内

<img class="lazy" data-original="img/example.jpg"  width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

然后通过 CSS 隐藏占位符：

.lazy {
    display: none;
}

在支持 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符显示出来，这可以在插件初始化的同时完成

$(function(){
    $("img.lazy").show().lazyload();
})

2、使用echojs
（1）引入：在HTML中引入echo.min.js

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

（2）图片中的src使用data-echo代替

<img class="lazy" data-echo="images/example.jpg" width="640" height="480">

（3）添加js代码

echo.init({
    offset: 500, //离可视区域多少像素的图片可以被加载
    throttle: 1000 //图片延时多少毫秒加载
});