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 延遲圖片載入，讓網站更順暢！