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

來源：微信公衆號CodeL

對於一些圖片多，頁面長的網頁來講，若是每次打開頁面加載所有的網頁內容，頁面加載速度勢必會受到影響，若是每次打開網頁只將網頁可視區域的內容加載給用戶 ，將大大提升網頁瀏覽速度，同時也減輕服務器負載，咱們可使用lazyload.js來實現對圖片的延遲加載，當網頁圖片進入到瀏覽器可視區域時，纔會去請求服務器加載圖片。
1、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只加載了佔位圖片，原圖片只有進入瀏覽器可視區域以後纔會被加載。

 

2、結果檢測與調試

1. 經過瀏覽器網絡流量捕獲判斷是否延遲加載瀏覽器F12打開調試工具，啓用流量捕獲，查看網絡請求狀況
2. 經過google瀏覽器Resources標籤頁能夠查看到請求的資源狀況，包括CSS、JS、圖片等內容

 

3、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)

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