淺談 jQuery圖片延遲載入特效 LazyLoad 原理


作者: | 2011/03/22 | 2 則迴響



LazyLoad特效,其實已經流行好一陣子了,它是一個jQuery的外掛,可以讓還沒出現在畫面上的網頁元素先別載入,直到使用者捲動捲軸,移到該元素時,它才載入。這對於網站上塞滿圖片的人可是一大福音,因為使用LazyLoad技巧,可以提升網站的載入速度。

Wow,這是怎麼辦到的?

首先網頁被開啟時,DOM會先載入,DOM載完,jQuery的document ready才會被觸發,這是標準的網頁載入流程。
其中DOM就是指頁面上的網頁元素,img當然也是一個網頁元素,但瀏覽器載完DOM還來不及載入圖片時,jquery的document ready就會被觸發囉。

一旦document ready開始執行,我們就要快點先把所有的img元素select起來,再把每個img內的src屬性值先保存到一個自訂的屬性值(lazyload外掛是取名為original),然後把src內的值砍了,或者先用一張無聊的淡灰色圖片取代! (lazyload外掛可以透過設定placeholder這個參數,來指定這張無聊的圖片的路徑)

當img的src被換掉了,就表示每個img元素原來的圖片不會被載入了,所以我們可以成功的阻斷後面大量圖片的載入,直到顯示img的條件被觸發 (lazyload外掛的觸發時機是捲動到該圖片),我們才載入圖片。

如果你有使用firebug,可以觀察一下 lazyload 的demo 頁面,一開始進入後先別往下捲動,開啟firebug就能看到下面還未載入的img元素,都多了original的屬性存放自己原本的圖片路徑,而src屬性就被無聊的灰色圖片取代了。


標籤:,

分類:

本文作者是Audi Lu

2 則留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

*

*

*

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料