我的网站首页加载太多图片，图片又太大了（广告图与幻灯图片加起来就不少）第一次打开太慢了，异步加载标签数据的方法已经使用上了，还是慢。如果你也有以上问题请往下看：

---------------图片懒加载相关资料-----------

echo.js 延迟加载图片控件：https://www.cnblogs.com/pandang/p/5766162.html

Suifeng发布的，X1加速打开速度和提高负载 网页篇https://x1.php168.com/bbs/show-6032.html

图片懒加载的两种方式http://www.360doc.com/content/18/0902/10/9200790_783230485.shtml

原生JS实现图片懒加载https://blog.csdn.net/qq_31965515/article/details/83412191

前端优化之图片懒加载https://www.cnblogs.com/wind-lanyan/p/9173755.html

js实现图片懒加载原理https://blog.csdn.net/w1418899532/article/details/90515969

图片懒加载的实现https://blog.csdn.net/zl13015214442/article/details/88600300

-------------------------------------------------------------------------------------

查看以上图片懒加载相关资料，发现有个echo.js 延迟加载图片控件很好用

使用echo.js非常简单，在网页需要延迟加载的img标签中，设置data-echo属于指向需要加载的图片路径，src属性指向默认加载图片路径。然后引入echo.min.js，并初始化echo即可。

你可以直接在页面的某处（我是放在pc_layout.htm上）添上如下的代码：

  <script src="/public/static/sz/js/echo.js"></script>
  <script>
  echo.init({
    offset: 100,
    throttle: 800,
    unload: false,
    callback: function (element, op) {
      console.log(element, 'has been', op + 'ed')
    }
  });
  </script>

首页 列表等调用方式：

比如：原来是 

<img src="{$rs.picurl}">

改为

<img src="/public/static/sz/pixel.gif" data-echo="{$rs.picurl}" class="js_imgload">

/public/static/sz/pixel.gif是一个1x1的图 自己随便设置一个即可。class="js_imgload" 是必须的

他的样式就一个背景图可以自己加到全局CSS中,随便找一个转圈圈的加载图即可

.js_imgload {background: url(../sz/loading.gif) no-repeat center;}

371_20191202034250c85e8.zip是echo.js及pixel.gif 、loading.gif文件

460_20230301101400362b7.zip

echo.js的github地址：https://github.com/toddmotto/echo

options : 

     offset  默认值为0。设置上下左右到viewport的距离多少才加载图片。

     offsetVertical  默认值为0。设置上下到viewport的距离是多少才加载图片。

     offsetHorizontal  默认值为0。设置左右到viewport的距离是多少才加载图片。

     offsetTop  默认值为offsetVertical。设置顶部距离viewport的距离

     offsetButton  默认值为offsetVertical。设置顶部距离viewport的距离

     offsetLeft  默认值为offsetVertical。设置左边距离viewport的距离

     offsetRight  默认值为offsetVertical。设置右边距离viewport的距离

     throttle 单位毫秒 设置图片延迟加载时间，通俗点说就是函数调用的频度控制器，是连续执行时间间隔控制。主要应用的场景比如：鼠标移动，mousemove事件；DOM元素动态定位，window对象的resize和scroll事件。     

     debounce 单位布尔值，默认true，      unload 单位布尔值，默认false。该选项告诉echo，当图片滑动超过了viewport的时候不在加载该图片。

     callback 单位函数，回调函数会传递已更新的元素和操作（load或者unload）给回调函数。

同时，通过调用echo.reader()函数模式scroll函数，触发echo加载图片。