echo.js的github地址:
https://github.com/toddmotto/echo
echo是一個獨立的JavaScript、輕量級的、延遲圖片加載插件,echo壓縮后體積不到1k,使用html的標准data-*屬性,echo支持IE8+。
使用echo.js非常簡單,在網頁需要延遲加載的img標簽中,設置data-echo屬於指向需要加載的圖片路徑,src屬性指向默認加載圖片路徑。然后引入echo.min.js,並初始化echo即可。
<script src="echo.min.js"></script>
<script> echo.init({ // options初始化參數 }); </script>
<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
options :
offset 默認值為0。設置上下左右到viewport的距離多少才加載圖片。
offsetVertical 默認值為0。設置上下到viewport的距離是多少才加載圖片。
offsetHorizontal 默認值為0。設置左右到viewport的距離是多少才加載圖片。
offsetTop 默認值為offsetVertical。設置頂部距離viewport的距離
offsetButton 默認值為offsetVertical。設置頂部距離viewport的距離
offsetLeft 默認值為offsetVertical。設置左邊距離viewport的距離
offsetRight 默認值為offsetVertical。設置右邊距離viewport的距離
throttle 單位毫秒 設置圖片延遲加載時間,通俗點說就是函數調用的頻度控制器,是連續執行時間間隔控制。主要應用的場景比如:鼠標移動,mousemove事件;DOM元素動態定位,window對象的resize和scroll事件。
debounce 單位布爾值,默認true, unload 單位布爾值,默認false。該選項告訴echo,當圖片滑動超過了viewport的時候不在加載該圖片。
callback 單位函數,回調函數會傳遞已更新的元素和操作(load或者unload)給回調函數。
同時,通過調用echo.reader()函數模式scroll函數,觸發echo加載圖片。