Lazy Load 延遲圖片載入,讓網站更順暢

當一個網站圖片越多,開啟的速度也會越慢,因為網頁的讀取是由上到下,當遇到了圖片時,讀取速度上絕不會像讀取圖片一樣順暢,常常因為圖片而延遲到網站的開啟速度,對於圖多的網站真的是吃了悶虧。那是否有辦法改善這種因為圖片而造成網站開啟太慢的問題呢?

事實上,我們可以透過JQuery的一個外掛「Lazy Load」來達成,當這外掛啟用後,遇到圖片時,他會先跳過,先上網頁上其它的東西優先載入,當其它的網頁物件載入完後,再換圖片進行載入,這樣就不會因為圖片的關係而讓網頁卡在圖片讀取,讓讀者閱讀上可以更順暢。


目前網路上有很多JQuery特效,如果你對JQuery有興趣,可以上網搜尋一下,你會找到很多不錯的資源。在這邊我們要向大家推薦一款我們覺得還不錯的特效外掛「Lazy Load」,如同前面提到,他可以延遲圖片的載入,算是可以稍為讓網頁讀取順暢一點,不因為圖片太大而卡住,讓網頁剩下的部分無法載入。

那當圖片延遲載入後,那什麼時候圖片會載入呢?就是當你頁面捲到(觸動到)圖片的位置時,他就會顯示出來,顯示的效果是有點漸變式,感覺蠻棒的,這個外掛只要你會調整就可以應用到各個網站,至於詳細的語法介紹,在此我們不多做說明,請有興趣的人到這網站參觀: [jQuery]外掛特輯01:Lazy Load-延遲載入網頁圖片

那不對外掛做說明,這篇文章就要這樣敷衍結束了嗎?其實不是啦!因為JQuery很棒很厲害,可是我每次使用都碰到一堆奇怪的問題,可能我跟他無緣吧?所以我就再找看看對WordPress用戶來說是否有對應的外掛,果真被我找到了,有一款外掛就是基於「Lazy Load」的原理製作,外掛是「jQuery Image Lazy Load WP」,外掛使用上很簡單,安裝啟動就可以了,完全不需要動到程式碼。

  • 外掛名稱:jQuery Image Lazy Load WP
  • 功能說明:圖片延遲載入
  • 官方網站按這裡
  • 外掛下載按這裡

第1步 到WordPress後台,點擊【外掛】→【新增】,然後輸入外掛名稱進行尋找。

Lazy Load 延遲圖片載入,讓網站更順暢!

第2步 找到「jQuery Image Lazy Load WP 」外掛,請點擊「立刻安裝」。

Lazy Load 延遲圖片載入,讓網站更順暢!

第3步 接下來請等待外掛下載,接著請點擊﹝啟用外掛﹞。

Lazy Load 延遲圖片載入,讓網站更順暢!

第4步 當你按下啟用外掛後,外掛就開始運作了,完全不需要任何設定。這外掛的做法是偵測網站上所有「img」語法,將它延遲。我們啟用外掛後可以開啟網頁原始檔案看一下。在黃色標示部分,約在33行那邊是載入JQ的外掛,在41~49行是設定可以針對哪部分的圖片進行延遲,大致上就是這樣,如果你非常了解運作原理,還可以對外掛做修改的動作喔。

展示網站Sinchen部落格

Lazy Load 延遲圖片載入,讓網站更順暢!