jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包 (徹底解決圖片 reflow 現象)

當網頁圖片多的時候，「影響效能的最大因素就是圖片載入」。除了縮減圖片尺寸、壓縮檔案來縮短傳輸時間之外，更好的改善方法是讓圖片能延遲載入，先讓頁面把主要文字內容優先顯示出來──這正是 jQuery 圖片延遲載入外掛「Lazy Load」的作用。

過去寫了一篇「Lazy Load 最佳安裝方式」，可以改善圖片載入的狀況。不過想要讓網頁效能最佳化的話，得另外解決「瀏覽器回流(reflow)」的現象──方法之一為每張圖片事先設定寬、高像素值。

當然這件事極為繁瑣，一一檢視每張圖片的尺寸、手動設定個別 CSS 參數，相信沒幾個人有這樣的耐心，同時這也是沒效率的事；而更讓人打消退堂鼓的是，網站的舊文章還有成千上萬張圖片，躺在那等著我們設定寬、高像素值呢！

好的，本篇的程式正是為了解決以上所有難題，自動幫文章中的圖片預先設定尺寸、並能執行最佳的 Lazy Load 效果。以下大致先說明原理，想直接安裝懶人包請跳至「二、準備動作」。

一、新舊版 Lazy Load 及最佳化原理

1. 版本差異

目前「Lazy Load 官網」提供的 js 版本，要正常運作得將圖片的 HTML 碼改為以下格式：

<img class="lazy" data-original="img/example.jpg" width="640" height="480">
原本 img 應該是 src 屬性的位置，必須改為 "data-original" 這樣的屬性，且須手動設定圖片寬、高值。如果每張圖片都這麼搞，沒幾個人有這樣的耐性吧？

這篇「Lazy Load 最佳安裝方式」使用 Lazy Load 舊版的 js，圖片 img 的 HTML 不需做任何變更即可執行延遲載入，因此舊版的 js 比較適合懶人安裝法，本篇的程式碼依舊沿用這個版本。


2. 自動取得圖片寬高

這部分的原理是，利用 jQuery 的 on() 函數來監控 img 的 load 事件，就能取得圖片的寬高值，再設定到原本的 img 上，來避免 reflow 的發生。


3. Lazy Load 擺放位置

如同「舊版 Lazy Load 教學」的說明，網頁不需要全部圖片都 Lazy Load，最需要使用 Lazy Load 的是文章區塊的圖片。因此最佳的執行位置是「文章區塊結尾處」，而非 </body> 之前的位置。

也因為這一點，要安裝 Lazy Load 得先「找出文章區塊結尾處」這個位置。本篇教學提供 Blogger 的範例，而非 Blogger 平台的使用者，可能需學會操作「Chrome 開發人員工具」這樣的介面，來自行找出文章區塊的位置。

二、安裝準備動作

1. Blogger 平台

安裝過舊版本的話，這部分的動作可不必再做。

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」，游標點進範本區塊，搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/lazyload-min.js'></script>

第一行的 js 檔可參考「如何使用jQuery版本」，檢查範本是否已安裝過 jquery，以免重複安裝。

第二行的 js 檔，由於過去發生「Google Drive(js檔)流量限速」的情形，為了避免將來這個檔無預警失效，建議讀者有空的時候，參考以上文章連結，自行將 js 檔分流。


2. 非 Blogger 平台

說明一樣參考第 1 點，程式碼放在範本中 </head>之前的位置即可。

三、安裝程式碼

1. Blogger 平台

A. 接著在範本中先找到 <b:if cond='data:post.hasJumpLink'>這個字串，會看到類似下面「繼續閱讀」的程式碼：

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

B.
緊接在以上程式碼後面，插入以下程式碼：





以下參數修改請參照以上程式碼行號：

F：預設讓 Lazy Load 抓文章區塊 .post-body之間的 img 標籤來進行延遲載入，而頁面其他區塊的圖片將沒有 Lazy Load 效果。(如果要設定別的區塊的圖片，那麼 E、F 行的紅色字串得改為該區塊的 class 或 id，且全部程式碼得改放到該區塊的位置之後。)

Y：除了使用藍色字串參數 "fadeIn" 的淡入特效，還可用 "slideDown" 由小圖伸展到大圖的特效，或是使用 "show" 無特效。


存檔後開一篇圖片多的文章即可看效果，或是也可參考 DEMO 網頁：



2. 非 Blogger 平台

A. 請先找出文章區塊的 class 或 id，可利用「Chrome 開發人員工具」這樣的介面。

B. 在後台範本中找到這個區塊的結尾處，於下一行插入「1. Blogger 平台」→ B 點的程式碼，並參照程式碼行號：

E~F：紅色字串得改為文章區塊的 class 或 id。

Y：除了使用藍色字串參數 "fadeIn" 的淡入特效，還可用 "slideDown" 由小圖伸展到大圖的特效，或是使用 "show" 無特效。

四、小結

若曾使用舊版 Lazy Load 安裝程式，由於圖片寬、高事先不知道數值，瀏覽器無法為圖片保留位置，畫面在捲動之間會不斷產生 reflow、版面區塊會不斷擠壓變動，增加瀏覽器無謂的運算量。使用了本篇新版的安裝程式後，相信畫面捲動的時候，可以明顯感受到兩者的差異性，為網頁帶來更好的效能。