延迟加载图片控件--echo.js

echo.js的github地址：https://github.com/toddmotto/echo

 

echo是一个独立的JavaScript、轻量级的、延迟图片加载插件，echo压缩后体积不到1k，使用html的标准data-*属性，echo支持IE8+。

 

 

一般将其放在滚动事件的下面：

<img class="lazy" src="tool/img.gif" :data-echo="i.url"/>

使用echo.js非常简单，在网页需要延迟加载的img标签中，设置data-echo属于指向需要加载的图片路径，src属性指向默认加载图片路径。然后引入echo.min.js，并初始化echo即可。

echo.init({
　　offset: 0,
　　throttle: 0 ,
　　unload: false,
　　callback: function (element, op) {
　　　　console.log(element, 'has been', op + 'ed')；//element是延迟加载的对象；
　　}
});

常用参数及方法说明

 

参数	描述	默认值
offset	离可视区域多少像素的图片可以被加载	0
throttle	图片延迟多少毫秒加载	250
debounce	防抖动	true
unload	告诉echo是加载还是卸载视图中的图片，当图片离开视图区域时触发	false
callback	回调函数，用来检测图片是否加载	function()

 

最后echo.js还提供了一个.render()方法，用法如下：

echo.render();

应用场景：当你的页面没有发生滚动，而你想加载即将要显示的图片，如图片轮播，当第一张图片显示完，接着滑动展示第二张图片，这个时候使用echo.render();提前加载第二张图片，就不会出现图片加载卡顿白屏等现象。