使用过淘宝的人都知道，我们在浏览淘宝页面时，淘宝上有非常多的图片。如果需要全部加在，那在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插件》。
： » JavaScript图片延迟加载插件Echo.js使用详解
原创文章，作者：wure，如若转载，请注明出处：https://blog.ytso.com/251264.html