圖片延遲載入已不是什麼新技術,而那天因為 wp super cache 一直秀鬥,手機與桌機版版型傻傻分不清楚,以及使用手機瀏覽時,卻出現電腦版,這讓網站在 Google 搜尋時,出現此網站不適合使用手機瀏覽,才讓我更換成 wp rocket 這套快照快取外掛,同時 wp rocket 這套快照快取功能相當的強大,同時內建就有圖片延遲載入的功能,因此我就好奇,將它開啟沒想到網站開啟速度竟然秒快,讓我對圖片延遲載入有了不一樣的感受。

  由於 wp rocket 則是將 WordPress 的所有 img 圖片標籤,會全面套用圖片延遲載入的效果,這也因此讓我先前所用的,使用前與使用後的效果立即失效,甚至就連滑入顯示原圖的特效也一樣,所以那一天我就研究了一下圖片延遲載入的作法,再將它加入排除的功能,讓有些圖片可以不要套用延遲載入,最後再花了點時間,將它寫成了 WordPress 的外掛,因此有需要的朋友,現在也一塊來看看吧!


MWT-Lazy Load image

外掛名稱:MWT-Lazy Load image
適用版本:WordPress 4.5+

外掛下載:本站下載

Step1
首先,下載並解壓縮後,再透過 FTP,將外掛上傳到 plugins 的資料夾下。


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


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


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