1、首先下载echo.js和blank.gif和loading.gif2、然后在页面中引入echo插件：
2、JS代码
<script src="/resource/wechat/js/echo/echo.js"></script>
<script>
echo.init({
offset: 100,//设置图片距离可视区域多少像素被加载（纵向）
throttle: 250,//设置图片延迟加载的时间
unload: false//,
//记录输出日志用
/* callback: function (element, op) {
console.log(element, 'has been', op + 'ed')
} */
});
</script>
3、书写html主体内容：
<body>
</body>
4、完整Demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
img {
/*带有loading的效果*/
background: url(/resource/wechat/images/echo/loading.gif) 50% no-repeat;
background-size: 15px;
}
</style>
</head>
<body>
</body>
<script src="echo.js"></script>
<script>
echo.init({
offset: 100,
throttle: 250,
unload: false,
callback: function (element, op) {
console.log(element, 'has been', op + 'ed')
}
});
</script>
</html>
5、大概意思：
将src换成默认的blank空白图片，将data-echo属性值换成真实的图片路径。这样既可达到懒加载的效果，可以通过F12的NETWORK查看，他每次都会随着滚动条往下滑而加载图片，不会一打开页面就加载全部。当他加载到某个图片的时候会发现图片的data-echo属性会消息，而src会变成真实的图片路径，也符合<img src=>语法。
若有兴趣，欢迎来加入群，【Java初学者学习交流群】：458430385，此群有Java开发人员、UI设计人员和前端工程师。有问必答，共同探讨学习，一起进步！
欢迎关注我的微信公众号【Java码农社区】，会定时推送各种干货：
qrcode_for_gh_577b64e73701_258.jpg
网友评论