對於一個網站，最佔用頻寬，最影響頁面顯示速度的東西就是圖片。圖片是很重要的，有時是必須的，作為一個站長，我們是千方百計的使用各種技巧來優化圖片，我們可以使用 ImageOptim 或 TinyPNG 來消減圖片體積，或用 data URIs 和小圖片來提升圖片載入速度。如果一個頁面上圖片太大，或圖片太多，無法消減，我們有另外一個方法來提升使用者的頁面顯示體驗，那就是延遲載入(lazy load)。之前我們介紹過使用 Lazy Load jQuery 外掛。但其實還有一種更簡單的方法，只需要幾行程式碼，就能達到這種效果。同時，還附加一種淡入淡出的顯示效果.

首先是圖片標記的寫法：

<img data-src="/path/to/image.jpg" alt="">
 

CSS程式碼

所有具有data-src屬性的圖片，我們將其初始顯示狀態為不可見，通過透明度來調節：

img {
	opacity: 1;
	transition: opacity 0.3s;
}

img[data-src] {
	opacity: 0;
}

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
	img.setAttribute('src', img.getAttribute('data-src'));
	img.onload = function() {
		img.removeAttribute('data-src');
	};
});