延遲網頁圖片下載 - 使用 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 網頁圖片優化工具 

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

 

文章標籤
創作者介紹

史丹利愛碎念

newaurora 發表在 痞客邦 PIXNET 留言(0) 人氣()