echo实现懒加载
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 />语法。
哇噻 谢谢咯 虽然看不懂，但是支持下
页:
[1]