<img
      src=""
      class="image-item"
      lazyload="true"
      data-original="https://gitee.com/josephxia/picgo/raw/master/juejin/image-20220124221805647.png?a=1"
    />

var viewHeight = document.body.clientHeight;
//获取可视区高度
function lazyload() {
  console.log('load')
  var list = document.querySelectorAll("img[data-original][lazyload]");
  list.forEach((item) => {
    if (item.dataset.original === "") return;
    var rect = item.getBoundingClientRect();
    console.log('图片相对位置top',rect.top)
    // 获得图片相对浏览器视窗的位置
    if (rect.bottom >= 0 && rect.top < viewHeight) {
      var img = new Image();
      img.src = item.dataset.original;
      img.onload = function () {
        item.src = img.src;
      };
      item.removeAttribute("data-original");
      //移除属性，下次不再遍历
      item.removeAttribute("lazyload");
    }
  });
}
lazyload(); //刚开始还没滚动屏幕时，要先触发一次函数，初始化首页的页面图片
document.addEventListener("scroll", lazyload);