1. 程式人生 > >jquery-懶載入技術(簡稱lazyload)

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 選項

$("img").lazyload({ threshold : 200 })

將臨界值定為 200,預設情況下,當他們出現在螢幕上時,預設的影象載入。如果要載入早期使用閾值引數的影象。設定閾值200使影象載入200畫素才能顯示在視口。

引數:threshold,值為數字,代表頁面高度.如設定為200,表示滾動條在離目標位置還有200的高度時就開始載入圖片,可以做到不讓使用者察覺.

高階篇詳細介紹(不想了解那麼多的可以直接繞過)

Lazy Load 是一個用 JavaScript 編寫的 jQuery 外掛. 它可以延遲載入長頁面中的圖片. 在瀏覽器可視區域外的圖片不會被載入, 直到使用者將頁面滾動到它們所在的位置. 這與圖片預載入的處理方式正好是相反的.

在包含很多大圖片長頁面中延遲載入圖片可以加快頁面載入速度. 瀏覽器將會在載入可見圖片之後即進入就緒狀態. 在某些情況下還可以幫助降低伺服器負擔.

Lazy Load 靈感來自 Matt Mlinac 製作的 YUI ImageLoader 工具箱.

怎樣使用?

Lazy Load 依賴於 jQuery. 請將下列程式碼加入頁面 head 區域:

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

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

什麼是成功?就是所有失敗的路都走過了,只剩下一條路還沒有走,這條路就叫成功!