前端插件實現圖片懶加載

一、echo.js：

　　我們在開發頁面的時候肯定會遇到圖片比較多的時候，雖然我們可能有圖片分布式的服務器，但是在客戶端還是會有很大的性能開銷。為了用戶體驗，特別是對首屏加載速度要求很高的，通常我們會考慮圖片延時加載，lazyloading這款插件已經能很好地實現這一功能，可是是基於jQuery，對於移動端可能不太實用。一個非常簡單實用叫echo的插件，3k左右特別適合移動端使用。步驟如下：

1、在頁面中需要引入echo.css和echo.min.js

2、對需要進行延遲加載的圖片采用如下寫法：

<img src="blank.gif" style="width:300px;height:300px;" data-echo="test.jpg" /> 

3、對插件進行初始化：

echo.init({ 　　offset:1,        //離可視區域多少像素的圖片可以被加載
　　throttle:1      //圖片延遲多少毫秒加載
});

　　說明：blank.gif是一張背景圖片，包含在插件里了。圖片的寬高必須設定，當然，可以使用外部樣式對多張圖片統一控制大小。

　　data-echo指向的是真正的圖片地址。非常簡單，這樣的話圖片只有出現在視野內時才會加載，減少了頁面的渲染工作量。

二、jquery.lazyload.js：

　　將頁面里所有img屬性src屬性用data-xx代替，當頁面滾動直至此圖片出現在可視區域時，用js取到該圖片的data-xx的值賦給src。

<section class="module-section" id="container">
     <img class="lazy-load" data-original="../static/img/loveLetter/teacher/teacher1.jpg" width="640" height="480" alt="測試懶加載圖片"/>
</section>

require.config({ baseUrl : "/static", paths: { jquery:'component/jquery/jquery-3.1.0.min' jqueryLazyload: 'component/lazyLoad/jquery.lazyload',//圖片懶加載
 }, shim: { jqueryLazyload: { deps: ['jquery'], exports: '$' } } });

require( [ 'jquery', 'jqueryLazyload' ], function($){ $(document).ready(function() { $("img.lazy-load").lazyload({ 　　　　　　　　effect : "fadeIn", //漸現，show(直接顯示),fadeIn(淡入),slideDown(下拉)
　　　　　　　　threshold : 180, //預加載，在圖片距離屏幕180px時提前載入
　　　　　　　　event: 'click',  // 事件觸發時才加載，click(點擊),mouseover(鼠標划過),sporty(運動的),默認為scroll（滑動）
　　　　　　　　container: $("#container"), // 指定對某容器中的圖片實現效果
　　　　　　　　failure_limit：2 //加載2張可見區域外的圖片,lazyload默認在找到第一張不在可見區域里的圖片時則不再繼續加載,
但當HTML容器混亂的時候可能出現可見區域內圖片並沒加載出來的情況
　　　　　　}); 　　　　}); 　　});

　　為了代碼可讀性，屬性值我都寫好了注釋。值得注意的是預制圖片屬性為data-original，並且最好是給予初始高寬占位，以免影響布局。