JavaScript圖像延遲載入庫Echo.js_javascript技巧

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

外掛程式描述：和 Lazy Load 一樣，Echo.js 也是一個用於映像延遲載入 JavaScript。不同的是 Lazy Load 是基於 jQuery 的插件，而 Echo.js 不依賴 jQuery 或其他 JavaScript 函式庫，可獨立使用。且 Echo.js 非常小巧，壓縮後不足 1KB。

相容性

Echo.js 使用了 HTML5 的 date 屬性，並且需要取得該屬性的值，所以它並不相容於 IE6、IE7。雖然 Lazy Load 也使用了 HTML5 的 date 屬性，但它取得值的方法不一樣。

使用方法

　　1、引入文件

複製程式碼 程式碼如下:

　　2、HTML

複製程式碼 程式碼如下:

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

　　3、JavaScript

Echo.init({
offset: 0,
throttle: 0
}); 

參數

參數

参数	说明
offset	离可视区域多少像素的图片可以被加载
throttle	图片延迟多少毫秒加载

說明

offset

離可視區域多少像素的圖片可以被載入

throttle

圖片延遲多少毫秒載入

以上內容是針對JavaScript圖片延遲載入函式庫Echo.js ，希望對大家有幫助！