圖片延遲載入外掛 Lazy Load__Blogger 最佳安裝方式

2014.12.17 公告：本文已有更新版，請前往「jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包」

若是圖片很多的部落格，非常有必要安裝 Lazy Load 這個圖片延遲載入的外掛，以改善網頁讀取的效能。不過為了這個功能在網路上奮戰了好久，一直沒有成功，也漸漸將此功能擱置。直到某天發現「布丁大」也有寫過相關文章，抱著姑且一試的心態，沒想到成功了！！於是趕緊研究一下到底布丁的安裝方式跟一般的安裝方式差別在哪裡。

以下大標題「一～三」為研究成功的過程，想直接安裝請跳至「四、最佳安裝方式」。

點此看範例網頁

一、成功安裝方式

經過不斷地重複交叉比對之後發現，原來以前不成功的原因在於 Lazy Load 的版本，「不連續x思考斷x面解構」沒有提供 js 檔，只提供官方連結，導致新版 Lazy Load 在舊的語法下無效；而布丁大則提供了 Lazy Load 的 js 檔連結「jquery.lazyload.mini.js」，這個舊的 Lazy Load 版本反而可以執行無誤。

Ok, 解決了版本問題，經過測試之後，只要使用布丁大的 Lazy Load 版本，以上兩個網站的安裝語法都可以執行無誤。那麼就來體驗一下 Lazy Load 的效果。


二、效能依舊不佳

找了一個圖片很多的網頁開始載入，為了看 Lazy Load 的圖片「fade in」效果，捲軸不斷往下拉，結果發現跟以往一樣，每張圖片依序慢慢地讀出來，舉例而言，往下拉的過程大概會看到第一張圖顯示讀到 50% 的位置(也就是顯示一半的圖片)、第二張圖顯示 40%、第三張圖顯示 30%...，且由於網頁不斷在存取，往下拉會顯得非常卡、捲動很困難的感覺。

但是到了某個時間點之後(也許十秒後)，網頁會忽然回到頂端的位置(這代表 Lazy Load 正式啟動)，接著我們往下拉，會發現也許第一張～第五張圖都已經讀完，所以直接顯示 100% 的畫面，沒有任何「fade in」特效；而從第六張圖開始，終於可以看到「fade in」效果，圖片產生了「淡入」的特效。雖然整個過程有點兩光，不過看到特效的一剎那，心裡還是有一絲絲的感動～～

只是，這樣的執行效率跟沒有使用 Lazy Load 其實差別不大，身為處女座性格很難接受這樣的成果，因此，不由自主地還是繼續研究下去...



三、效能不佳的原因

為了找出 Lazy Load 效能不佳的原因，研究了一下 jQuery 語法原理。

1.「不連續x思考斷x面解構」安裝方式：

$(function(){$("img").lazyload();});
以上的程式碼為使用 jQuery(document).ready() 的簡易寫法，其代表的意思請參考「使用 jQuery(document).ready() 與 window.onload 注意事項」這篇文章。根據定義，以上的安裝方式，代表 Lazy Load 會在網頁的所有物件全部都 "取得" 時，才抓取所有 <img> 標籤的物件來進行外掛的動作。

而網頁的所有物件何時會 "全部取得" 呢？舉個簡單的比喻就是網頁原始碼從第一行讀到最後一行時。但是，圖片的顯示可不會等整個網頁都讀取完才開始顯示，一邊讀取時就會一邊顯示。所以，使用 document.ready() 的安裝方式，當很多的圖片都已經顯示的差不多了，Lazy Load 才開始上工，難怪特效要顯示也是那麼的 Lazy ...

2.「布丁布丁吃什麼」安裝方式：

$("#main .blog-posts .post-body img").lazyload({
effect : "fadeIn",
placeholder: "https://sites.google.com/site/puddingchen35/2011-06-blogger-image-lazy-load/grey.gif"
});
布丁大使用新增「HTML/JavaScript小工具」的方式，放在網頁最下方，他並沒有用 document.ready() 的方式，而是只抓取 Blogger 文章顯示區塊 (id為 main) 裡面的 <img> 標籤。

那麼，這個方法什麼時候會執行 Lazy Load 呢？ 由於這個「HTML/JavaScript小工具」放在網頁最下方，所以也是等到整個網頁都快要讀完時才會讀到這個「HTML/JavaScript小工具」的程式碼，比起 document.ready() 來講，大概節省了幾毫秒的時間吧。以效能而言，這個「HTML/JavaScript小工具」不如擺在側邊欄的最上方，這樣只要一讀完文章顯示區塊，就會輪到執行 Lazy Load 了。

不過，「HTML/JavaScript小工具」擺在側邊欄的最上方，除了影響美觀，其實也節省沒有多少時間，因為程式碼讀取最多的部分，就在文章顯示區塊。

所以，到底有沒有辦法，讓 Lazy Load 不需要讀取程式碼最多的「文章顯示區塊」，就直接執行呢？


四、最佳安裝方式

2013.8.9 公告

由於近日存放在 Google Code 的 js 檔全部被刪除了，本文的外連 js 檔已改放到 Google Drive 空間。曾安裝過本文程式碼的讀者，下面原來的 js 連結 'http://wayne-fu.googlecode.com/files/lazy-min.js' 請改為 'https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/lazyload-min.js'。為了避免日後有其他意外，也建議讀者參考「取代 Google Code 外連 js 檔的選擇__Google Drive」，自行備份 js 檔並上傳到自己的 Google Drive 空間。

「文章顯示區塊」內要讀取的資料很多，除了文章的圖片，還要讀取一些外部的資料庫，例如「讚」按鈕、外掛按鈕、留言資料區塊等等(就是文章後面的所有資料)，如果留言很多的話，讀取時間可想而知，這些都會影響圖片的顯示速度；因此，如果能夠在文章圖片讀取完的一剎那，在讀取非文章的其他資料之前，就讓 Lazy Load 工作，這應該會是最佳的顯示效果。

根據以上假設，開始在範本中尋找適當的位置插入 Lazy Load，試了幾個地方後，終於找到了最佳位置，以下為 Blogger 平台的安裝步驟：

1. 到 Blogger 後台 → 範本 → 編輯 HTML

2. 在 </head> 之前插入 jQuery 以及 Lazy Load 的外掛程式庫：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/lazyload-min.js'/>
(如果範本裏已經有 jQuery 就不需要重複安裝第一行的 jQuery)

3. 在範本中先找到 <data:post.body/>，(2014.2.26 補充：如果是新範本的話，應該是在第三個搜尋結果)這代表文章內容(包含我們要處理的圖片)，通常之後的程式碼就是「繼續閱讀」的程式碼，(大約往下四行可看到)類似下面的程式碼：

<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>
緊接在以上「繼續閱讀」的程式碼後面，插入以下 Lazy Load 的安裝程式碼，就能讓 Lazy Load 以最快的速度上工了：


如果非 Blogger 平台，以上的程式碼請加在文章區塊之後即可。

C：加入 IE 的判斷句，讓非 IE 的瀏覽器才執行 Lazy Load 的效果，因為測試的結果，程式碼擺放到這個位置 IE 不支援 Lazy Load。而擺在太後面的位置 Lazy Load 有使用等於沒有使用，乾脆就放棄讓 IE 執行。不加入判斷句的話，我的測試在 IE 下連圖都跑不出來；如果能找到讓 IE 顯示的方法，請自行修改這部分的 javascript。

2012.10.11 增補

1. Jquery 版本：「四、最佳安裝方式」第 2 點的 jquery 連結是 1.4.1 版，最近測試使用最新版的 jquery，在 IE8 下可以有 lazy load 的效果(只是我覺得 IE 載入速度還是很慢)，因此請將原本的版本連結──

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
改成以下最新 1.8.2 版的連結──

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
2. 去除 IE 判斷式：原本的安裝程式碼有 IE 判斷式，讓 IE 下不執行 lazy load。而裝了最新版的 jquery 後，如果想讓 IE 下有 lazy load 的效果，請將原本安裝程式碼的 C 行與 H 行刪除即可。
D：這個語法會讓 Lazy Load 抓在這個位置之前的 <img> 標籤來進行動作，所以在文章後面才讀取的圖片就沒有 Lazy Load 效果了，不過應該無所謂吧？主要就是要處理文章的圖片。

E：除了用 "fadeIn" 的淡入特效，還可用 "slideDown" 由小圖伸展到大圖的特效，或是使用 "show" 無特效。

點此看範例網頁

存檔後就大功告成，參考上面的範例網頁，會發現網頁開啟後，圖片若是沒有全部讀取完是不會先顯示的，這就是捲軸往下拉時，比較不會像以往一樣卡卡的原因了，而且等圖片讀取完後還可看到 fade in 的特效，心情是不是愉悅多了呢？

優化網站效能 相關文章：