js 图片延迟加载echo.min.js
和 Lazy Load 一样，Echo.js 也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件，而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库，可独立使用。并且 Echo.js 非常小巧，压缩后不足 1KB。
延迟加载是提高网页首屏显示速度的一种很有效的方法，当图片元素进入窗口可视区域的时候，它就会改变图像的src属性，从服务端加载所需的图片，这也是一个异步的过程。
-
引入所需要的Javascript文件：<script src="js/echo.min.js"></script>
-
添加HTML图片元素
<img src="images/blank.gif" alt="pic" data-echo="imgphoto.jpg" width="640" height="480">
blank.gif 是一个 1 x 1 的图片，用做默认图片，data-echo 的属性值是图片的真实地址。同样最好给图片设置宽度和高度，或者在 CSS 中设置也可以，否则似乎很底部很底部的图片才会延迟加载。
注：blank.gif为预加载的照片，photo.jpg为最后显示的照片
-
初始化echo：
Echo.init({
offset: 0,
throttle: 0//设置图片延迟加载的时间
});
// Echo.render(); is also available for non-scroll callbacks
-
相关参数如下图所示：
-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单的JavaScript图像延迟加载库Echo.js案例1</title>
<style>
.demo img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;}
</style>
</head>
<body>
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">简单的JavaScript图像延迟加载库Echo.js演示</h1>
<div>
<a href="./">演示1</a>
<a href="index_2.html">演示2（图片延迟5秒加载）</a>
</div>
<div style="width: 736px; margin: 0 auto;">
<img src="images/blank.gif" data-echo="images/big-1.jpg">
<img src="images/blank.gif" data-echo="images/big-2.jpg">
<img src="images/blank.gif" data-echo="images/big-3.jpg">
<img src="images/blank.gif" data-echo="images/big-4.jpg">
<img src="images/blank.gif" data-echo="images/big-5.jpg">
<img src="images/blank.gif" data-echo="images/big-6.jpg">
<img 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>
-
简单的JavaScript图像延迟加载库Echo.js案例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单的JavaScript图像延迟加载库Echo.js演示2</title>
<style>
.demo img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;}
</style>
</head>
<body>
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">简单的JavaScript图像延迟加载库Echo.js演示2</h1>
<div>
<a href="./">演示1</a>
<a href="index_2.html">演示2（图片延迟3秒加载）</a>
</div>
<div style="width: 736px; margin: 0 auto;">
<img src="images/blank.gif" data-echo="images/big-1.jpg">
<img src="images/blank.gif" data-echo="images/big-2.jpg">
<img src="images/blank.gif" data-echo="images/big-3.jpg">
<img src="images/blank.gif" data-echo="images/big-4.jpg">
<img src="images/blank.gif" data-echo="images/big-5.jpg">
<img src="images/blank.gif" data-echo="images/big-6.jpg">
<img src="images/blank.gif" data-echo="images/big-7.jpg">
</div>
<script src="js/echo.min.js"></script>
<script>
Echo.init({
offset: 0,
throttle: 3000
});
</script>