本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
使用过淘宝的人都知道，我们在浏览淘宝页面时，淘宝上有非常多的图片。如果需要全部加在，那在3秒之内可能完全打不开淘宝。而现实是淘宝能够在3秒之内打开。
淘宝这么高深的技术是怎么做的呢？答案是动态加载，或者说是图片懒加载。本文将介绍一款微型的插件JavaScript图片延迟加载库Echo.js，实现类似淘宝这样的动态加载功能。
Echo.js是一个标准的独立的Javascript图片懒加载（延迟加载）库，它非常小巧快速，只有2KB，它使用HTML5的 data-*属性，延迟请求加载图片资源，不依赖任意第三方插件库，特别适用于移动端需要加载大量图片的应用。
使用方法
引入文件
<script src="js/echo.min.js"></script>
HTML结构
<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
blank.gif 是一个 1 x 1 的图片，用做默认图片，data-echo 的属性值是图片的真实地址。你可以给图片设置宽度和高度，或者在 CSS 中设置，否则似乎很底部很底部的图片才会延迟加载。
然后初始化echo.js
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();提前加载第二张图片，就不会出现图片加载卡顿白屏等现象。
下面是一个demo的全部实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>简单的JavaScript图像延迟加载库Echo.js</title>
<style>
.demo img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;}
</style>
</head>
<!-- 业余草：www.xttblog.com -->
<body>
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">简单的JavaScript图像延迟加载库Echo.js演示</h1>
<div class="demo" style="width: 736px; margin: 0 auto;">
<img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">
<img class="lazy" src="images/blank.gif" data-echo="images/big-2.jpg">
<img class="lazy" src="images/blank.gif" data-echo="images/big-3.jpg">
<img class="lazy" src="images/blank.gif" data-echo="images/big-4.jpg">
<img class="lazy" src="images/blank.gif" data-echo="images/big-5.jpg">
<img class="lazy" src="images/blank.gif" data-echo="images/big-6.jpg">
<img class="lazy" src="images/blank.gif" data-echo="images/big-7.jpg">
</div>
<script src="js/echo.min.js"></script>
<script>
Echo.init({
offset: 0,
throttle: 0
});
</script>
</body>
</html>
前面写过两篇类似的延迟加载的文章《jQuery图片延迟加载插件lazyload.js》和《前端性能优化:实现图片延迟加载之lazyload.js插件》。
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » JavaScript图片延迟加载插件Echo.js使用详解