图片懒加载(适合手机端)

link/script

lazy-load-img.js

dom

<ul id="list">
  </ul>

js

 <script>
    ; (function () {
      var ul = document.getElementById('list')
      for (var i = 1; i <= 21; i++) {
        var li = document.createElement('li')
        li.innerHTML = '![](./images/default.png)'
        ul.appendChild(li)
      }
      var lazyLoadImg = new LazyLoadImg({
        el: document.querySelector('#list'),
        mode: 'diy', //默认模式，将显示原图，diy模式，将自定义剪切，默认剪切居中部分
        time: 300, // 设置一个检测时间间隔
        complete: true, //页面内所有数据图片加载完成后，是否自己销毁程序，true默认销毁，false不销毁
        position: { // 只要其中一个位置符合条件，都会触发加载机制  这些值都是真的浏览器的screenTop来定的
          top: 200, // 元素距离顶部
          right: 200, // 元素距离右边
          bottom: 0, // 元素距离下面
          left: 0 // 元素距离左边
        },
        diy: { //设置图片剪切规则，diy模式时才有效果
          backgroundSize: '100% 100%',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center'
        },
        before: function () { // 图片加载之前执行方法
          alert("到距离了");
        },
        success: function (el) { // 图片加载成功执行方法
          el.classList.add('success')
        },
        error: function (el) { // 图片加载失败执行方法
          el.src = './images/error.png'
        }
      })
      // lazyLoadImg.start() // 重新开启懒加载程序
      // lazyLoadImg.destroy() // 销毁图片懒加载程序
    })()
      console.log(screenTop);
  </script>