echo.js 延遲加載圖片控件


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加載圖片。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM