延遲網頁圖片下載 - 使用 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的圖片，那就失去使用這功能的意義了
以上就是延遲圖片下載的做法
如果覺得對你有幫助的話. 麻煩幫小弟按個讚哦～
其他相關文章參考：
留言列表
