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

來源：微信公眾號CodeL

對於一些圖片多，頁面長的網頁來說，如果每次打開頁面加載全部的網頁內容，頁面加載速度勢必會受到影響，如果每次打開網頁只將網頁可視區域的內容加載給用戶 ，將大大提高網頁瀏覽速度，同時也減輕服務器負載，我們可以使用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)

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