JavaScript圖像延遲加載庫Echo.js

字號(hào):


    Echo 是一個(gè)獨(dú)立的 JavaScript 懶加載圖像的工具,快速、體積?。ú蛔?k)和使用 HTML5 的 data- 屬性,通過本文給大家介紹JavaScript圖像延遲加載庫Echo.js ,感興趣的朋友一起學(xué)習(xí)吧
    Echo 是一個(gè)獨(dú)立的 JavaScript 懶加載圖像的工具,快速、體積小(不足1k)和使用 HTML5 的 data- 屬性。Echo 支持 IE8+ 。
    插件描述:和 Lazy Load 一樣,Echo.js 也是一個(gè)用于圖像延遲加載 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依賴于 jQuery 或其他 JavaScript 庫,可獨(dú)立使用。并且 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" data-echo="img/pic.jpg" width="640" height="480"> 
    blank.gif 是一個(gè) 1 x 1 的圖片,用做默認(rèn)圖片,data-echo 的屬性值是圖片的真實(shí)地址。同樣最好給圖片設(shè)置寬度和高度,或者在 CSS 中設(shè)置也可以,否則似乎很底部很底部的圖片才會(huì)延遲加載。
    3、JavaScript
    Echo.init({
    offset: 0,
    throttle: 0
    });
    參數(shù)
    
參數(shù) 說明
offset 離可視區(qū)域多少像素的圖片可以被加載
throttle 圖片延遲多少毫秒加載

    以上內(nèi)容是針對(duì)JavaScript圖像延遲加載庫Echo.js ,希望對(duì)大家有所幫助!