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

在Google News上追蹤我們最新文章
香腸
香腸

喜歡在網路上透過文字與圖片分文章教學,默默地用鍵盤烤了9年的香腸。另外還身兼阿腸接案餬口飯吃。對了,別叫我阿腸,請叫我香腸,這樣我才知道你看我部落格長大的。

文章: 1781

15 則留言

    • Lazyload 技巧的優點不僅在控管流量而已,
      在使用者瀏覽時,不必等網頁上所有圖片載完便可顯示完成,有提昇體驗的好處

  1. 使用這似乎有個問題.當網頁中有放在DIV中的圖片.而此DIV被預設為隱藏時..當觸發此DIV後.要稍微移動一下捲軸圖片才顯示的出來.不曉得有沒有解決這個的辦法?

    香腸回應:
    那你可能要去改code,鎖定在哪個區域下的img類型才使用這樣的東西。
    因為預設是針對全站的img語法做處理

  2. 不是啦@口@
    我只是照抄木木(immmmm.com)的教學,我自己都不會寫jQuery呢……(汗)

    香腸回應:
    你是吸收再教學呢~
    話說我每次用幾乎都不成功 = =

  3. 大家好我就是圖很多的苦主。這外掛會先以看到的圖與網站的文字呈現優先顯示,之後會再背景慢慢讀取圖片(還沒看到的)。當你卷軸往下後,會再把你看到的圖片顯示出來。

    香腸回應:
    苦主好 (膜拜)

  4. 放在網頁上的圖片,還是要經過處理(壓縮)才是王道。
    以前也是偏愛 png的圖片,壓縮過後還是要 200K上下,
    現在..全改回 JPG的圖片了,以一張 500X300 的圖片經過 photoshop再壓縮,可以到 50K左右。
    以我的肉眼看,是分不出來差異,但速度快很多。

    香腸回應:
    會壓的,可以把圖片壓很小且不失真,不過網頁上使用PNG效果最棒~不過就那IE6令人討厭 = =

  5. 很棒的東西耶,但之前香腸為什麼會拿掉呢?不好用嗎?

    香腸回應:
    之前用這個時,在MyBlogLog顯示會有點卡,怪怪的~~
    不過寫了這篇還是沒用是因為多用要多吃流量阿~XD

  6. 當遇到了圖片時,讀取速度上絕不會像讀取圖片一樣順暢???

    還是?

    當遇到了圖片時,讀取速度上絕不會像讀取文字一樣順暢???

    香腸回應:
    @@?
    他會先將非圖片部分載入完,當你滑動網頁時,觸動到圖片部分他會漸層式的秀出

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料