Blogger 圖片延緩載入功能 (image lazy load)

6月 27, 2011 程式寫作 , Blogger , JavaScript , Programming/JavaScript 3 Comments Edit Copy Download

繼前一篇無限捲頁功能，這一篇實作了Blogger說要做但是尚未實裝的圖片延緩載入功能。我先簡單地介紹一下圖片延緩載入的原理，然後再講述要如何安裝。

圖片延緩載入

當網頁開啟之後，瀏覽器會嘗試讀取網頁中的所有圖片。如果電腦效能不足、網頁圖片數量過多，剛開啟網頁的時候，瀏覽器就會像是當機一樣無法動彈，甚至連拉個捲軸看看其他地方都不行。

為了解決網頁圖片數量過多的問題，之前我提到的CSS Sprites是一個解決方案，它嘗試將許多零星的圖片合併成一張，以節省讀取圖片需要的額外載入時間（overhead）。

另一個更直接的作法，就是這篇要談的圖片延緩載入功能。當網頁內容相當多的時候，使用者並不會一口氣就閱讀所有的內容，而只會瀏覽到「視窗所看到」的範圍。那麼在這個範圍之外的圖片，就可以暫時先不載入，而可以用像是上圖一樣的灰色背景來替代。那個灰色並不是圖片本身，只是一個佔位圖片（placeholder）而已。

圖片延緩載入功能會分析網頁指定範圍中的所有圖片，先將使用者瀏覽範圍之外圖片全部替換成佔位圖片，停止網頁進行實際上的載入動作。

當網頁瀏覽到該圖片位置的附近時，圖片延緩載入功能會偵測到這個事件發生，並將佔位圖片替換成真正的圖片，這時才即時進行載入。也許使用者在瀏覽時會覺得怎麼突然會卡一下，不過那個瞬間也是相當地短。如果每一張要讀取的圖片也不大的話，圖片延緩載入功能並不太會影響使用者瀏覽的節奏。

題外話：圖片預先載入功能

提到圖片延緩載入功能，就會讓人想起另一種相反的作法：圖片預先載入功能。

圖片預先載入是先在使用者看不到的地方載入圖片，讓圖片存入瀏覽器的快取。當使用者真的要瀏覽該圖片的時候，從快取中載入的圖片會讓瀏覽更為流暢。

實作時，通常是在讀取這網頁的前一個網頁中實作。例如有些網站會在真正的首頁前放一個Flash影片播放的網頁，那麼當使用者欣賞影片的時候，JavaScript或其他程式就在背後偷偷地載入真正首頁中的圖片。那麼當使用者看完影片、進入真正的首頁時，首頁中的圖片就能夠快速地顯示出來。

圖片預先載入功能的重點在於「猜得到使用者接下來要看的圖片」。在導覽功能四通八達的現代網站，我們難以預料使用者的下一頁究竟會看是什麼資料、到底要預先載入什麼圖片。而早期網站設計都喜歡的假首頁（就像上面說的，用來擺放影片之類的首頁），現在也逐漸為人捨棄不用。就算是一踏入假首頁，使用者也多會略過而直接進入真正的首頁，而沒有機會用到圖片預先載入的功能。

另一個使用圖片預先載入功能的時機是「停留替換圖片」（hover）。當滑鼠移到某張圖片或某個位置時，將該位置顯示的圖片替換成其他圖片。許多網頁都會使用這一技巧，它也很容易讓人猜到使用者接下來要讀取的下一張圖片是什麼，因此特別適合用於圖片預先載入。圖片延緩載入Image Lazy Load Plugin for jQuery的作者Mika Tuupola也有針對圖片預先載入功能提出一個方法，詳情請看Preload Images Sequentially With jQuery這篇文章。

安裝圖片延緩載入

安裝小工具

跟大多數Blogger額外設定的功能一樣，圖片延緩載入功能也是從新增HTML/JavaScript小工具開始。

進入Blogger的管理介面，進入「設計」的「網頁元素」，在頁尾的地方新增小工具。

選擇其中的HTML/JavaScript。

標題留空，內容填入以下圖片延緩載入程式碼：

<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>google.load("jquery","1.2.6");</script>
<script src='http://sites.google.com/site/puddingchen35/2011-06-blogger-image-lazy-load/jquery.lazyload.mini.js' type='text/javascript'></script>
<script type="text/javascript">
$("#main .blog-posts .post-body img").lazyload({
    effect : "fadeIn",
    placeholder: "https://sites.google.com/site/puddingchen35/2011-06-blogger-image-lazy-load/grey.gif"
});
</script>

儲存設定，這樣就完成了。

設定圖片延遲載入

在圖片延遲載入的程式碼中，有兩個地方可以設定，位於以下範圍中：

$("#main .blog-posts .post-body img").lazyload({
    effect : "fadeIn",
    placeholder: "https://sites.google.com/site/puddingchen35/2011-06-blogger-image-lazy-load/grey.gif"
});

1. effect：顯示真正圖片時的特效。預設值是「show」，表示直接替換；「faceIn」是淡入效果。
2. placeholder：佔位圖片。不使用佔位圖片的話，圖片甚至連保留位置都沒有，而讀取時就會像是突然插入一張圖片、即時改變頁面的排版，我覺得不是很好看。在此採用原作者建議的灰色底圖作為佔位圖片，你也可以自行改為其他佔位圖片。

其他還有很多設定，詳情請看Lazy Load Plugin for jQuery的說明。

製作參考

我在建構此功能時，一開始是先從別人的Word Press網站上看到的jQuery Image Lazy Load外掛。而這個外掛其實又是源自於jQuery的Lazy Load插件。製作者Mika Tuupola將圖片延緩載入功能寫得相當完整，因此我也沒有多做修改，以下只是額外撰寫了供Blogger使用的語法而已。

結語

圖片延緩載入功能安裝之後，基本上就可以放著正常運作。可是我用一用赫然發現，偶爾還是會出現像上圖一樣的讀取失敗畫面。我在想這比較可能是Chrome功能的問題，而不是圖片延緩載入功能的問題吧。

其實圖片延緩載入比前一篇的無限捲頁還要早做，而且比無限捲頁還簡單很多，但因為怕無限捲頁做到最後自己都忘了，所以這一篇才延緩到現在才寫吧。