插件描述：和 Lazy Load 一樣，Echo.js 也是一個(gè)用于圖像延遲加載 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件，而 Echo.js 不依賴于 jQuery 或其他 JavaScript 庫(kù)，可獨(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" alt="pic" 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
});

比較詳細(xì)的參數(shù)

echo.init({  
offset: 100,  
throttle: 250,  
unload: false,  
callback: function (element, op) {  
console.log(‘loaded ok.');  
}  
});

常用參數(shù)及方法說明

參數(shù)	描述	默認(rèn)值
offset	離可視區(qū)域多少像素的圖片可以被加載	0
throttle	圖片延遲多少毫秒加載	250
debounce	防抖動(dòng)	true
unload	告訴echo是加載還是卸載視圖中的圖片，當(dāng)圖片離開視圖區(qū)域時(shí)觸發(fā)	false
callback	回調(diào)函數(shù)，用來檢測(cè)圖片是否加載	function()

最后echo.js還提供了一個(gè).render()方法，用法如下：

echo.render();??

應(yīng)用場(chǎng)景：當(dāng)你的頁(yè)面沒有發(fā)生滾動(dòng)，而你想加載即將要顯示的圖片，如圖片輪播，當(dāng)?shù)谝粡垐D片顯示完，接著滑動(dòng)展示第二張圖片，這個(gè)時(shí)候使用echo.render();提前加載第二張圖片，就不會(huì)出現(xiàn)圖片加載卡頓白屏等現(xiàn)象。

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

您可能感興趣的文章: