JavaScript圖像延遲加載庫Echo.js
Echo 是一個獨(dú)立的 JavaScript 懶加載圖像的工具，快速、體積?。ú蛔?k）和使用 HTML5 的 data- 屬性。Echo 支持 IE8+ 。
插件描述：和 Lazy Load 一樣，Echo.js 也是一個用于圖像延遲加載 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" alt="pic" data-echo="img/pic.jpg" width="640" height="480">
blank.gif 是一個 1 x 1 的圖片，用做默認(rèn)圖片，data-echo 的屬性值是圖片的真實(shí)地址。同樣最好給圖片設(shè)置寬度和高度，或者在 CSS 中設(shè)置也可以，否則似乎很底部很底部的圖片才會延遲加載。
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 | 防抖動 | true |
| unload | 告訴echo是加載還是卸載視圖中的圖片，當(dāng)圖片離開視圖區(qū)域時觸發(fā) | false |
| callback | 回調(diào)函數(shù)，用來檢測圖片是否加載 | function() |
最后echo.js還提供了一個.render()方法，用法如下：
echo.render();??
應(yīng)用場景：當(dāng)你的頁面沒有發(fā)生滾動，而你想加載即將要顯示的圖片，如圖片輪播，當(dāng)?shù)谝粡垐D片顯示完，接著滑動展示第二張圖片，這個時候使用echo.render();提前加載第二張圖片，就不會出現(xiàn)圖片加載卡頓白屏等現(xiàn)象。
以上內(nèi)容是針對JavaScript圖像延遲加載庫Echo.js ，希望對大家有所幫助！
相關(guān)文章
這篇文章主要介紹了javascript代碼混淆與加解密方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
分享JavaScript獲取網(wǎng)頁關(guān)閉與取消關(guān)閉的事件
這篇文章主要介紹了JavaScript獲取網(wǎng)頁關(guān)閉與取消關(guān)閉的事件，有需要的朋友可以參考一下2013-12-12
Js實(shí)現(xiàn)復(fù)選框的全選、全不選反選功能代碼實(shí)例
這篇文章主要介紹了Js實(shí)現(xiàn)復(fù)選框的全選、全不選和反選,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
日期聯(lián)動算是一個比較常見的功能了，隨便度娘一下，你就能找到N多代碼，今天給大家介紹的是個人比較常用，代碼很簡潔，高效，這里推擠給大家。2015-01-01
下面小編就為大家分享一篇js將鍵值對字符串轉(zhuǎn)為json字符串的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
JS使用正則實(shí)現(xiàn)去掉字符串左右空格的方法
這篇文章主要介紹了JS使用正則實(shí)現(xiàn)去掉字符串左右空格的方法,結(jié)合實(shí)例形式分析了JS針對首尾匹配及空格匹配的簡單實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12
JS控制只能輸入數(shù)字并且最多允許小數(shù)點(diǎn)兩位
這篇文章主要介紹了JS控制只能輸入數(shù)字并且最多允許小數(shù)點(diǎn)兩位,本文給大家提到j(luò)s如何限制input輸入框只能輸入數(shù)字問題，需要的朋友可以參考下2019-11-11
這篇文章主要給大家介紹了關(guān)于js控制radio選中、不可選和改變事件的相關(guān)資料,我們經(jīng)常會遇到j(luò)s控制radio選中和切換的問題,需要的朋友可以參考下2023-07-07
這篇文章主要簡單介紹了Javascript Base64 加密解密的使用方法，有需要的小伙伴參考下2014-12-12
js項(xiàng)目中雙向數(shù)據(jù)綁定的簡單實(shí)現(xiàn)方法
雙向數(shù)據(jù)綁定指的就是，綁定對象屬性的改變到用戶界面的變化的能力,反之亦然,下面這篇文章主要給大家介紹了關(guān)于js項(xiàng)目中雙向數(shù)據(jù)綁定的簡單實(shí)現(xiàn)方法,需要的朋友可以參考下2021-08-08