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

標籤：class   檔案   觸發事件   htm   get   jquer   asc   set   圖片   

第一：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 檔案：

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