
圖片延遲載入已不是什麼新技術,而那天因為wp super cache一直秀斗,手機與桌機版版型傻傻分不清楚,以及使用手機瀏覽時,卻出現電腦版,這讓網站在Google搜尋時,出現此網站不適合使用手機瀏覽,才讓梅干更換成wp rocket這套快取外掛,同時wp rocket這套快取功能相當的強大,同時內建就有圖片延遲載入的功能,因此梅干就好奇,將它開啟沒想到網站開啟速度竟然秒快,讓梅干對圖片延遲載入有了不一樣的感受。
由於wp rocket則是將WordPress的所有img圖片標籤,會全面套用圖片延遲載入的效果,這也因此讓梅干先前所用的,使用前與使用後的效果立即失效,甚至就連滑入顯示原圖的特效也一樣,所以那一天梅干就研究了一下圖片延遲載入的作法,再將它加入排除的功能,讓有些圖片可以不要套用延遲載入,最後再花了點時間,將它寫成了WordPress的外掛,因此有需要的朋友,現在也一塊來看看吧!
MWT-Lazy Load image
Step1
首先,下載並解壓縮後,再透過FTP,將外掛上傳到plugins的資料夾下。

Step2
接著進到WordPress後台,將它啟用,當啟用完畢後,不會產生任何的設定選項。

Step3
再回到WordPress的前台,滾動頁面時才會開始載入圖片,當圖片還沒載入時,就會出現載入的圖示。

Step4
當有圖片不要使用延遲載入時,只需在img加入class=”dis-lazy-load”,就可跳過延遲載入,透過延遲載入後,可讓網頁開啟的速度變更快,有用WordPresss的朋友,也趕快來安裝一下囉!
