echo实现懒加载

NullPointer · 发表于 2016-11-11 13:53

1、首先下载echo.js和blank.gif和loading.gif2、然后在页面中引入echo插件：

<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 >
<img src="blank.gif" data-echo="meinv1.png" alt="">
<img src="blank.gif" data-echo="meinv2.png" alt="">
<img src="blank.gif" data-echo="meinv3.png" alt="">
<img src="blank.gif" data-echo="meinv4.png" alt="">
<img src="blank.gif" data-echo="meinv5.png" alt="">
</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 >
<img src="blank.gif" data-echo="meinv1.png" alt="">
<img src="blank.gif" data-echo="meinv2.png" alt="">
<img src="blank.gif" data-echo="meinv3.png" alt="">
<img src="blank.gif" data-echo="meinv4.png" alt="">
<img src="blank.gif" data-echo="meinv5.png" alt="">
</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 />语法。

ioopiopop · 发表于 2016-11-11 13:57

哇噻谢谢咯

喜你是癌 · 发表于 2016-11-11 21:57

虽然看不懂，但是支持下

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] echo实现懒加载

免费评分

个人中心