jquery-懶加載技術(簡稱lazyload)

第一：lazyLoad簡介及做用：

網站性能優化的插件，提升用戶體驗。

頁面若是有不少圖片的時候，當你滾動到相應的行時，當前行的圖片才即時加載的，這樣子的話頁面在打開只加可視區域的圖片，而其它隱藏的圖片則不加載。

第二：使用場合

　涉及到圖片，falsh資源，iframe，網頁編輯器(CK)，JS文件 等佔用較大帶寬，避免網頁打開時加載過多資源，讓用戶等待過久。

第三：代碼使用

1.導入JS插件(前提有 1.6.2.js文件)

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

2.在你的頁面中加入以下：

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

因此圖片都延遲加載。

3.設置敏感度區域

插件提供了 threshold 選項

$("#xd").lazyload({ threshold : 200 })

將臨界值定爲 200, 當可視區域離圖片還有 200 個象素的時候開始加載圖片. (這一句原文的字面意思和本人理解不一致, 原文: Setting threshold to 200 causes image to load 200 pixels before it is visible.)

參數:threshold,值爲數字,表明頁面高度.如設置爲200,表示滾動條在離目標位置還有200的高度時就開始加載圖片,能夠作到不讓用戶察覺.

4. 還有涉及到 高級應用，觸發事件，多參數等等。詳細見參考 url

參考：

加載 圖片 ：http://www.cnblogs.com/szytwo/archive/2012/12/27/2836141.html

加載 js 文件：

 

 

5.使用jQuery.Lazyload延遲加載圖片後 在img標籤會多加一條屬性data-original="圖片地址"（data-original能夠自定義）個人問題是成功加載圖片後，如何自動移除這條自定義的屬性。

------解決方案--------------------
能夠修改lazyload插件，在加載完畢每張圖片執行還原原圖片後移除data-original屬性

JScript code

$(this).removeAttr('data-original');