Echo.js图片懒加载教程：原生JS实现高性能延迟加载

Echo.js是一款独立、轻量级的JavaScript图片懒加载工具，压缩后体积不足1KB，无需依赖jQuery。本文详细介绍其兼容性、HTML5 data-attribute用法、核心参数配置及render()方法，帮助开发者提升页面加载性能，避免白屏卡顿。

Echo 是一款独立的 JavaScript 图片懒加载工具，具备运行速度快、体积小巧（压缩后不足 1KB）的特点，并基于 HTML5 的 data- 属性进行工作。该库支持 Internet Explorer 8 及以上版本。

与 Lazy Load 类似，Echo.js 也用于实现图像的延迟加载。主要区别在于，Lazy Load 是 jQuery 插件，而 Echo.js 不依赖 jQuery 或其他任何 JavaScript 库，可独立运行。此外，Echo.js 极其轻量，压缩后代码量小于 1KB。

Echo.js 依赖 HTML5 的 data 属性来获取属性值，因此不支持 IE6 和 IE7。尽管 Lazy Load 也使用 HTML5 data 属性，但其获取值的方式不同，从而在兼容性上存在差异。

第一步：引入 Echo.js 文件。

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

第二步：编写 HTML 代码。

<img src="images/blank.gif" alt="pic" data-echo="img/pic.jpg" width="640" height="480">

示例中使用的 blank.gif 是一个 1x1 像素的透明图片，作为默认占位图。data-echo 属性指定了图片的真实路径。建议为图片设置明确的宽度和高度，或在 CSS 中定义，否则可能导致位于页面底部的图片无法正确触发懒加载。

第三步：调用 JavaScript 初始化代码。

Echo.init({
offset: 0,
throttle: 0
});

以下是更详细的配置参数说明。

echo.init({  
offset: 100,  
throttle: 250,  
unload: false,  
callback: function (element, op) {  
console.log(‘loaded ok.');  
}  
});

常用参数及方法详解

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

Echo.js 额外提供了一个 .render() 方法，具体用法如下。

echo.render();

应用场景：当页面未发生滚动，但需要预加载即将显示的图片（如图片轮播中第一张展示完毕后滑动至第二张）时，调用 echo.render() 可提前加载第二张图片，从而避免图片加载过程中的卡顿或白屏现象。

以上为 JavaScript 图像延迟加载库 Echo.js 的完整介绍，希望能为您的开发工作提供帮助。

Echo.js：轻量级原生JS图片懒加载库使用指南