淺談 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屬性就被無聊的灰色圖片取代了。
分類：JavaScript技巧
本文作者是Audi Lu
2 則留言
[…] (本文摘錄自 : https://audilu.com/2011/03/22/introjquery%E5%9C%96%E7%89%87%E5%BB%B6%E9%81%B2%E8%BC%89%E5%85%A5…) […]
感謝教學。