本文介绍如何使用 ECHO.js 实现纯 JavaScript 的图片延迟加载。通过引入 echo.min.js 并调用 Echo.init() 初始化，可配置 offset 和 throttle 参数。结合 data-echo 属性指定真实图片路径，并设置加载中的默认背景图（如 GIF），有效提升网页打开速度及用户体验。
ECHO.js 简介与演示
ECHO.js 纯 JavaScript 轻量级延迟加载的实例代码
演示
<!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>
<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>ECHO.js 应用步骤
应用
1. 引入 JavaScript 文件并完成初始化
<script src="{sh::PUB}js/echo.min.js"></script>
<script>
Echo.init({
offset: 0,
throttle: 0
});
</script>2. 为图片元素添加相关属性
<img class="lazy" src="{sh::PUB}img/common/blank.gif" data-echo="{sh:$goods.logoimg}" alt="">3. 为尚未加载的图片设置默认背景，例如动态 GIF 动画
.lazy{width:100%;height:100%;background: url({sh::PUB}img/common/loading.gif) 50% no-repeat;}
性能优化建议
该方法操作便捷且实用。若要进一步提升网页加载速度，建议对上传的图片进行优化处理。
导致网页加载缓慢的原因通常包括：数据库查询耗时较长、图片资源加载缓慢、未采用延迟加载技术，以及图片文件体积过大。
针对上述原因，可逐一进行排查与解决。
此举有助于提升整体用户体验。
以上关于 ECHO.js 纯 JavaScript 轻量级延迟加载的实例代码即为全部内容分享，希望能提供有益参考，也欢迎大家继续支持本站。