Echo 是一個獨立的 JavaScript 懶加載圖像的工具，快速、體積小（不足1k）和使用 HTML5 的 data- 屬性。Echo 支持 IE8+ 。

和 Lazy Load 一樣，Echo.js 也是一個用於圖像延遲加載 JavaScript。不同的是 Lazy Load 是基於 jQuery 的插件，而 Echo.js 不依賴於 jQuery 或其他 JavaScript 庫，可獨立使用。並且 Echo.js 非常小巧，壓縮後不足 1KB。

延遲加載是提高網頁首屏顯示速度的一種很有效的方法，當圖片元素進入窗口可視區域的時候，它就會改變圖像的src屬性，從服務端加載所需的圖片，這也是一個異步的過程。

工具/原料

筆記本電腦或是臺式機

互聯網

Echo.js

方法/步驟

引入所需要的Javascript文件：

添加HTML圖片元素

blank.gif 是一個 1 x 1 的圖片，用做默認圖片，data-echo 的屬性值是圖片的真實地址。同樣最好給圖片設置寬度和高度，或者在 CSS 中設置也可以，否則似乎很底部很底部的圖片才會延遲加載。

注：blank.gif為預加載的照片，photo.jpg為最後顯示的照片

初始化echo：

Echo.init({

offset: 0,

throttle: 0//設置圖片延遲加載的時間

});

// Echo.render(); is also available for non-scroll callbacks

相關參數如下圖所示：

簡單的JavaScript圖像延遲加載庫Echo.js演示

案例1運行效果如下圖所示：

簡單的JavaScript圖像延遲加載庫Echo.js案例2

簡單的JavaScript圖像延遲加載庫Echo.js演示2

案例2運行效果如下圖所示：

注意事項

Echo.js使用了HTML5的data-屬性，並且需要獲取該屬性的值，所以它不能兼容IE6、IE7.

雖然Lazy Load也使用了HTML5的data屬性，但它獲取值的方法不一樣。