:::

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

image image

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


圖片延緩載入

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

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

image

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

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

image

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

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

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

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

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

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

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


安裝圖片延緩載入

安裝小工具

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

2011-06-25_233326 設計 網頁元素

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

2011-06-25_233246 新增JavaScript

選擇其中的HTML/JavaScript。

image

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

<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使用的語法而已。


結語

image

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

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

總共3 則留言 ( 我要發問 , 隱藏留言 顯示留言 )

  1. 有人反映這功能沒有辦法生效的問題。
    我大概看了一下,發現現在許多人雖然都用Blogger作為網站基礎,但是範本的HTML卻是差別很大,因而導致程式找不到需要的元素。

    以這篇來說,有一段程式碼是這樣:
    <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"指的就是程式要抓取的範圍,是這個範圍底下的圖片才會生效。
    可是現在有些Blogger卻捨棄了id="main",因此導致無法抓取。

    建議修改成以下程式碼試試看:
    <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">
    $(".blog-posts .post-body img").lazyload({
    effect : "fadeIn",
    placeholder: "https://sites.google.com/site/puddingchen35/2011-06-blogger-image-lazy-load/grey.gif"
    });
    </script>

    回覆刪除