前端插件實現圖片懶加載

1、echo.js：

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

一、在頁面中須要引入echo.css和echo.min.js

二、對須要進行延遲加載的圖片採用以下寫法：

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

三、對插件進行初始化：

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

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

　　data-echo指向的是真正的圖片地址。很是簡單，這樣的話圖片只有出如今視野內時纔會加載，減小了頁面的渲染工做量。

2、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，而且最好是給予初始高寬佔位，以避免影響佈局。