史丹利愛碎念

延遲網頁圖片下載 - 使用 Lazy Load 套件

一般而言，我們經常會在網頁上，放上大量圖片來吸引讀者瀏覽

但是當圖片檔案太多、太大都會影響網頁載入的速度

這時候我們可以使用圖片延遲下載的技巧

來降低第一時間載入的圖片量

下面要介紹的是JQuery的套件 "Lazy Load"

這個套件主要用來延遲圖片下載   (碎碎念：廢話，不然用它幹啥!!)

讓網頁第一時間先把其它文字、html標籤...等其他訊息載入完畢後

再開始載入圖片

優點：

A. 增加網頁瀏覽效能

B. 優化使用者體驗(使用者不會因為網頁的loading覺得網頁壞掉)

缺點：

A. 程式工作增加

接下來就看看怎麼寫吧!!

      首先一樣引用JQuery的JS

       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

      然後引用lazyload的JS檔   

      (官方連結：http://www.appelsiini.net/projects/lazyload)

      <script src="js/jquery.lazyload.js?v=1.9.1"></script>

      這邊開始才是重點，下面程式呼叫lazyload出來用

      <script type="text/javascript" charset="utf-8">

      $(function() {

            //下面表示在這個html檔內的 img 標籤而且 class="lazyload" 才執行圖片延遲載入(class名稱可修改)

            $("img.lazyload").lazyload({

                  //載入的圖片用淡入的效果載入

                  effect : "fadeIn"

            });

      });

      </script>

      最後所有的圖片引用都必須改寫

      原始圖片載入寫法：

      <img src="圖片網址" class="classname" width="50" height="60" />

      (這邊加入尺寸的原因可以參考這篇 網頁效能優化-圖片篇)

      修改後延遲圖片載入寫法：

      <img data-original="圖片網址" width="50" height="60" class="lazyload classname"/>

      差別在於：

      1. src 拿掉，改成 data-original

      2. class 需要新增一個 lazyload 

      另外有些人可能需要修改自己專屬的loading圖片

      只需要打開jquery.lazyload.js檔案

      然後找到 placeholder :"loading圖片網址" ，在這裡做修改就可以了

    特別注意的是，延遲圖片下載的美意是為了減少網頁第一時間的loading，所以千萬不要為了花俏，去做了一個檔案很大的loading的圖片，那就失去使用這功能的意義了

以上就是延遲圖片下載的做法

如果覺得對你有幫助的話. 麻煩幫小弟按個讚哦～

其他相關文章參考：

網頁效能優化-圖片篇 

Kraken.io 網頁圖片優化工具 

網站開發工具清單 (持續更新中...)