今天就跟大家聊聊有關(guān)JavaScript圖片延遲加載微型庫Echo.js是怎樣的，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
Echo.js是一個(gè)標(biāo)準(zhǔn)的獨(dú)立的Javascript圖片懶加載（延遲加載）庫，它非常小巧快速，只有2KB，它使用HTML5的 data-*屬性，延遲請(qǐng)求加載圖片資源，不依賴任意第三方插件庫，特別適用于移動(dòng)端需要加載大量圖片的應(yīng)用。
1、引入文件
2、HTML結(jié)構(gòu)
blank.gif 是一個(gè) 1 x 1 的圖片，用做默認(rèn)圖片，data-echo 的屬性值是圖片的真實(shí)地址。你可以給圖片設(shè)置寬度和高度，或者在 CSS 中設(shè)置，否則似乎很底部很底部的圖片才會(huì)延遲加載。
3、JavaScript
echo.init({
offset: 100,
throttle: 250,
unload: false,
callback: function (element, op) {
console.log('loaded ok.');
}
});
參數(shù)描述默認(rèn)值
offset離可視區(qū)域多少像素的圖片可以被加載0throttle圖片延遲多少毫秒加載250debounce防抖動(dòng)trueunload告訴echo是加載還是卸載視圖中的圖片，當(dāng)圖片離開視圖區(qū)域時(shí)觸發(fā)falsecallback回調(diào)函數(shù)，用來檢測圖片是否加載function()
最后echo.js還提供了一個(gè).render()方法，用法如下：
echo.render();
應(yīng)用場景：當(dāng)你的頁面沒有發(fā)生滾動(dòng)，而你想加載即將要顯示的圖片，如圖片輪播，當(dāng)?shù)谝粡垐D片顯示完，接著滑動(dòng)展示第二張圖片，這個(gè)時(shí)候使用echo.render();提前加載第二張圖片，就不會(huì)出現(xiàn)圖片加載卡頓白屏等現(xiàn)象。
看完上述內(nèi)容，你們對(duì)JavaScript圖片延遲加載微型庫Echo.js是怎樣的有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
重慶分公司
重慶分公司
