echo.js實現圖片延遲加載, 效果看起來較為接近原生APP。在移動端時,可以采用此技術,實現只有屏幕當前的圖片才會顯示下載到本地。節約用戶流量,加快網頁加載速度。
這個插件實用較為簡單,源碼下載就可直接實用。
調用演示例
<div class="pic">
<img src="./img/blank.gif" class="img" data-echo="http://b.hiphotos.baidu.com/image/pic/item/0b55b319ebc4b745924fa817cdfc1e178b8215d3.jpg" />
</div>
<div class="pic">
<img src="./img/blank.gif" data-echo="http://h.hiphotos.baidu.com/image/pic/item/5ab5c9ea15ce36d3c26af63138f33a87e950b140.jpg" />
</div>
<div class="pic">
<img src="./img/blank.gif" data-echo="http://e.hiphotos.baidu.com/image/pic/item/0b55b319ebc4b7456f6d4d14cdfc1e178a821532.jpg" />
</div>
echo.init({ offset: 0, // 指定距離視窗上下左右位置圖片預加載 Number|String Default: 0 throttle: 250, // 延遲加載 Number|String Default: 250 unload: true, callback: function(element, op) { // console.log(element, 'has been', op + 'ed') } });