若是圖片很多的部落格,非常有必要安裝 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 不需要讀取程式碼最多的「文章顯示區塊」,就直接執行呢?
四、最佳安裝方式
由於近日存放在 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 平台,以上的程式碼請加在文章區塊之後即可。
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 的特效,心情是不是愉悅多了呢?
優化網站效能 相關文章:
我加入了lazy loading,測試中。謝。
回覆刪除感謝,大大提供這麼多語法教學,使用這些教學對我這個一般使用者來說很有幫助。
回覆刪除希望大大繼續提供更多blogger教學 我也會繼續支持 ^^
您好,我按照這篇方式操作,可是在我的範本編輯html,搜尋不到這個東西
回覆刪除請問有無其他關鍵字可搜尋呢? 謝謝
囧,剛剛才發現上面留言括弧裡的語法消失了,謝謝你,我會在試試
回覆刪除昨晚裝了解決圖片延遲的語法後,結果網頁更慢,所以又把他給移除了 沒關係,就這樣吧,不麻煩你找答案
回覆刪除wfu 大您好,先前按教學裝成功了很開心,
回覆刪除但今天突然發現裝了這個之後 blogger 本身的 lightbox就失效了!
似乎是有相容性問題耶,不知有何方式可救回 lightbox,
因為 lightbox 特效也是蠻好用的,點圖網頁不會亂連影響閱讀
感謝wayne! 我安裝好這個了^^
回覆刪除<5933878980304981545>(以上內容請勿刪除,從括號之後開始留言) 我自己都忘了我有用lightbox! 難怪我的lazyloard一下好一下全部圖片都打不開! 做抉擇真的是很苦惱的一件事情
回覆刪除><
<932015092762157091>(以上內容請勿刪除,從括號之後開始留言)我已經先拿掉lazyloard了! 不知道是我的範本已經太亂了的關係還怎樣,阿冠的文章圖片更多可是卻開很快!! 我每張圖片檔案都壓縮到500K以下了自己開起來還真的會有點拖...也有朋友跟我反映最近看我的文章網頁要讀取時間有變比較長,所以這應該也是我接下來要解決的問題了! 希望能順利~QQ
回覆刪除我剛剛沒看留言就裝了 才發現原來跟內建的 lightbox 會重突XD
回覆刪除發現衝突的原因是, lazyloard 是網頁看到哪,圖片才載到哪,可是 lightbox 是一進網頁讀到的圖片才算數,所以後面因為 lazyloard 才開啟的圖片,無法使用 lightbox 的狀態去瀏覽,點一下會變成連結到那張圖片網址...
只好默默移除 lazyloard ...
js 鏈接已失效了
回覆刪除