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、引入文件
復制代碼 代碼如下:
<script src="js/echo.min.js"></script>
2、HTML
復制代碼 代碼如下:
<img src="images/blank.gif" alt="pic" data-echo="img/pic.jpg" width="640" height="480">
blank.gif 是一個 1 x 1 的圖片,用做默認圖片,data-echo 的屬性值是圖片的真實地址。同樣最好給圖片設置寬度和高度,或者在 CSS 中設置也可以,否則似乎很底部很底部的圖片才會延遲加載。
3、JavaScript
Echo.init({ offset: 0, throttle: 0 });
參數
以上內容是針對JavaScript圖像延遲加載庫Echo.js ,希望對大家有所幫助!