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

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

<script src="js/echo.min.js"></script>

<script>
echo.init({
// options初始化参数
	offset:0,
	throttle:0
});
// echo.render();
</script>

<img src="images/loading.gif" data-echo="images/photo.jpg">
<!-- src里面放一个加载的loading.gif图，真正的地址放在data-echo即可 -->

常用参数及方法说明

——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.js还提供了一个.render()方法，用法如下：

echo.render();

应用场景：当你的页面没有发生滚动，而你想加载即将要显示的图片，如图片轮播，当第一张图片显示完，接着滑动展示第二张图片，这个时候使用echo.render()

提前加载第二张图片，就不会出现图片加载卡顿白屏等现象。

下载地址：

GitHub下载 蓝奏网盘下载 CSDN下载 90网盘下载 百度网盘下载提取码：xcwu