Web性能優化之圖片延遲載入

對於一些圖片多，頁面長的網頁來說，如果每次打開頁面載入全部的網頁內容，頁面載入速度勢必會受到影響，如果每次打開網頁只將網頁可視區域的內容載入給用戶 ，將大大提高網頁瀏覽速度，同時也減輕伺服器負載，我們可以使用lazyload.js來實現對圖片的延遲載入，當網頁圖片進入到瀏覽器可視區域時，才會去請求伺服器載入圖片。
一、lazyload用法1.引用jQuery插件：

<script src="jquery.min.js"></script>
<script src="jquery.lazyload.js" ></script>

2.修改img標簽將頁面中的img標簽src屬性調整為如下例子：
<img src="1.gif" data-original="img/my.jpg" />
src屬性:使用一張1px占點陣圖片或使用64位編碼圖片代替(很重要，否則圖片會被全部載入，更嚴重的是圖片會被載入2次)，這裡使用的1.gif圖片，而實際開發中我選擇了64位編碼圖片(下麵代碼表示1px的gif圖片，可直接放在src屬性中使用)：data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg

選擇64位編碼圖片的原因是載入時不會去請求伺服器，普通的占點陣圖片會請求一次伺服器。
data-original：將實際要載入的圖片放在data-original屬性中,這裡的my.jpg代表要載入的原圖片

3.調用方法$("img").lazyload();
這樣就完成了頁面中所有圖片延遲載入的功能了，預設打開頁面時img只載入了占點陣圖片，原圖片只有進入瀏覽器可視區域之後才會被載入。

二、結果檢測與調試

1. 通過瀏覽器網路流量捕獲判斷是否延遲載入瀏覽器F12打開調試工具，啟用流量捕獲，查看網路請求情況
2. 通過google瀏覽器Resources標簽頁可以查看到請求的資源情況，包括CSS、JS、圖片等內容

三、lazyload屬性介紹以下是列舉的幾個常用屬性：

event：觸發載入的事件，如scoll，click

effect：載入的動畫效果，如 show, fadeIn, slideDown

threshold：靈敏度，預設為 0 進入可視區域立即載入顯示；設為正數表示圖片距離可視區域 x 像素時載入；設為負數表示圖片距離可視區域 x 像素時載入。

屬性使用方法：

$("img").lazyload({

event:"scoll",//促發事件，預設scoll

effect:"fadeIn" //載入圖片使用的效果(淡入)
});

如果將lazyload延遲載入和上篇文章講到的靜態文件動態合併載入一起使用，網站將會得到更好的優化效果。
我在公眾號CodeL發完這篇之後，有不少網友說可以再加個背景圖片提示用戶載入中效果，比如加個loading效果什麼的，其實不用多麻煩，我們完全可以將1px的占點陣圖片換成一張loading.jif圖，就算圖片大點，也不會產生多大影響，因為同一個圖不管使用多少次，同一個頁面都只會請求一次。

相關資源獲取或其他疑問可在公眾號留言。

如果你有優秀的原創技術類文章也可以投稿至公眾號CodeL分享給大家賺取賞金喲！

原文鏈接：http://mp.weixin.qq.com/s?__biz=MzIzNTE2OTk1MA==&mid=402793125&idx=1&sn=e687cf61592f0212446bf75ee0c2ea2d#rd

相關資源獲取或其他疑問可在掃碼添加CodeL公眾號留言。(微信公眾號: codelir)

微信掃一掃獲取更多開發資源：