2012年5月30日

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

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

若是圖片很多的部落格,非常有必要安裝 Lazy Load 這個圖片延遲載入的外掛,以改善網頁讀取的效能。相關的介紹網路上已經很多,可參考此篇文章「影像部落格必備外掛: Lazyload」。

不過為了這個功能在網路上奮戰了好久,一直沒有成功,也漸漸將此功能擱置。直到某天發現「布丁大」也有寫過相關文章,抱著姑且一試的心態,沒想到成功了!!於是趕緊研究一下到底布丁的安裝方式跟一般的安裝方式差別在哪裡。

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



一、成功安裝方式

經過不斷地重複交叉比對之後發現,原來以前不成功的原因在於 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 的特效,心情是不是愉悅多了呢?


優化網站效能 相關文章:

19 則留言:

  1. 我加入了lazy loading,測試中。謝。

    回覆刪除
  2. <8186243686413679280>(以上內容請勿刪除,從括號之後開始留言)不客氣!

    回覆刪除
  3. 感謝,大大提供這麼多語法教學,使用這些教學對我這個一般使用者來說很有幫助。

    希望大大繼續提供更多blogger教學 我也會繼續支持 ^^

    回覆刪除
  4. <6633375860605337145>(以上內容請勿刪除,從括號之後開始留言)謝謝你的支持
    目前待辦事項躺著寫不完的文章,所以暫時不用擔心沒有教學 ^^

    回覆刪除
  5. 您好,我按照這篇方式操作,可是在我的範本編輯html,搜尋不到這個東西
    請問有無其他關鍵字可搜尋呢? 謝謝

    回覆刪除
  6. <6980174268708428404>(以上內容請勿刪除,從括號之後開始留言)我發現在新範本中搜尋的話,跟以前好像不太一樣,所以補充了「四、最佳安裝方式」的部份內容,用紅字特別標示出來,請再試試看吧!

    回覆刪除
  7. 囧,剛剛才發現上面留言括弧裡的語法消失了,謝謝你,我會在試試

    回覆刪除
  8. 昨晚裝了解決圖片延遲的語法後,結果網頁更慢,所以又把他給移除了 沒關係,就這樣吧,不麻煩你找答案

    回覆刪除
  9. <5092254667896928985>(以上內容請勿刪除,從括號之後開始留言)你的首頁的確裝了 lazy load 網頁載入速度慢 → 但這不是正常現象 於是我使用 chrome 的無痕模式(不會讀取瀏覽器cache)測試, 結果速度很快 → 因此原因應該是瀏覽器快取,並非 lazyload 的問題。

    由於比較常讀取首頁,瀏覽器會去搜尋首頁的圖片cache,而首頁文章數太多時,導致這個搜尋的動作花費很多時間 → 可以開一篇不常打開的文章,由於瀏覽器沒有快取,那麼就能看到 lazy load 的效果了

    雖然使用 lazy load 讀取自己的首頁速度可能會不正常(是瀏覽器的緣故),但讀者並不會常讀取你的首頁,不會有大量的首頁圖片需要快取 → 對於訪客而言,lazy load 可以改善網頁讀取效率。

    回覆刪除
  10. wfu 大您好,先前按教學裝成功了很開心,
    但今天突然發現裝了這個之後 blogger 本身的 lightbox就失效了!
    似乎是有相容性問題耶,不知有何方式可救回 lightbox,
    因為 lightbox 特效也是蠻好用的,點圖網頁不會亂連影響閱讀

    回覆刪除
  11. <6806155382869291915>(以上內容請勿刪除,從括號之後開始留言)您好~是的,這個程式會跟lightbox不相容,當初發現的時候也是奮戰好久,最後放棄了,因為內建的lightbox根本找不到從哪裡修改,所以無從下手。

    不過因為我也不太喜歡lightbox會將圖縮小,導致看不到原圖尺寸,所以就將他關閉了。如果一定要用lightbox的話,我覺得可以找其他lightbox外掛,但是不能馬上執行,否則必定跟lazy load打架。

    如果你會用jquery的話,或許試試看用 $(window).load()讓頁面全部載入後,再執行lightbox的外掛,或許有機會可以成功!

    回覆刪除
  12. 感謝wayne! 我安裝好這個了^^

    回覆刪除
  13. <4597829641378020736>(以上內容請勿刪除,從括號之後開始留言)orsino, 我看你有使用 lightbox, 由於 lazyload 的效果會跟 lightbox 相衝,你可能要二擇一喔~

    回覆刪除
  14. <5933878980304981545>(以上內容請勿刪除,從括號之後開始留言) 我自己都忘了我有用lightbox! 難怪我的lazyloard一下好一下全部圖片都打不開! 做抉擇真的是很苦惱的一件事情
    ><

    回覆刪除
  15. <4957451770131656020>(以上內容請勿刪除,從括號之後開始留言)我看來研究這件事好了,以前不能解決,現在的功力應該能搞定才對~

    回覆刪除
  16. <932015092762157091>(以上內容請勿刪除,從括號之後開始留言)我已經先拿掉lazyloard了! 不知道是我的範本已經太亂了的關係還怎樣,阿冠的文章圖片更多可是卻開很快!! 我每張圖片檔案都壓縮到500K以下了自己開起來還真的會有點拖...也有朋友跟我反映最近看我的文章網頁要讀取時間有變比較長,所以這應該也是我接下來要解決的問題了! 希望能順利~QQ

    回覆刪除
  17. <5283565258254597726>(以上內容請勿刪除,從括號之後開始留言)500k !! 那我確定是圖片的關係~XD
    我的圖片超過 100k 就受不了了,通常都是壓在 50k 以下,不過風景、物體的圖片尺寸本來就會比較大,你調查一下阿冠的圖片平均大小好了 :)

    回覆刪除
  18. 我剛剛沒看留言就裝了 才發現原來跟內建的 lightbox 會重突XD

    發現衝突的原因是, lazyloard 是網頁看到哪,圖片才載到哪,可是 lightbox 是一進網頁讀到的圖片才算數,所以後面因為 lazyloard 才開啟的圖片,無法使用 lightbox 的狀態去瀏覽,點一下會變成連結到那張圖片網址...

    只好默默移除 lazyloard ...

    回覆刪除
  19. <2673678083414854895>(以上內容請勿刪除,從括號之後開始留言)lightbox 與 lazyload 的 solution 請見「fancybox」留言 #5 回覆,只不過這個 solution 目前的計畫並非放在「會員限定文章」,而是「會員加值文章」就是了。

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。