溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關JavaScript圖片延遲加載微型庫Echo.js是怎樣的，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
Echo.js是一個標準的獨立的Javascript圖片懶加載（延遲加載）庫，它非常小巧快速，只有2KB，它使用HTML5的 data-*屬性，延遲請求加載圖片資源，不依賴任意第三方插件庫，特別適用于移動端需要加載大量圖片的應用。
1、引入文件
<script src="js/echo.min.js"></script>
2、HTML結構
<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
blank.gif 是一個 1 x 1 的圖片，用做默認圖片，data-echo 的屬性值是圖片的真實地址。你可以給圖片設置寬度和高度，或者在 CSS 中設置，否則似乎很底部很底部的圖片才會延遲加載。
3、JavaScript
echo.init({
offset: 100,
throttle: 250,
unload: false,
callback: function (element, op) {
console.log('loaded ok.');
}
});
參數描述默認值
offset離可視區域多少像素的圖片可以被加載0throttle圖片延遲多少毫秒加載250debounce防抖動trueunload告訴echo是加載還是卸載視圖中的圖片，當圖片離開視圖區域時觸發falsecallback回調函數，用來檢測圖片是否加載function()
最后echo.js還提供了一個.render()方法，用法如下：
echo.render();
應用場景：當你的頁面沒有發生滾動，而你想加載即將要顯示的圖片，如圖片輪播，當第一張圖片顯示完，接著滑動展示第二張圖片，這個時候使用echo.render();提前加載第二張圖片，就不會出現圖片加載卡頓白屏等現象。
看完上述內容，你們對JavaScript圖片延遲加載微型庫Echo.js是怎樣的有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
