图片懒加载实现

实现原理：当前img标签距离滚动盒子的距离（offsetTop） 小于 （滚动盒子已滚出去的距离（scrollTop）+ 滚动盒子的可视高度（clientHeight）），即可认为img标签进入了盒子的可视区域之内，在此时对img标签的src属性赋值，即可加载图片
注：只有img标签的src属性改变了，才会发送资源请求，加载新的图片

* {
  margin: 0;
  padding: 0;
}
.box {
  width: 280px;
  height: 590px;
  border: 2px solid skyblue;
  margin: 0 auto;
  overflow: auto;
}
.box img {
  width: 100%;
  height: 200px;
  vertical-align: top;
}

<div class="box">
  <img src="./image/loading.jpg" alt="" data-src="./image/001.jpg">
  <img src="./image/loading.jpg" alt="" data-src="./image/002.jpg">
  <img src="./image/loading.jpg" alt="" data-src="./image/003.jpg">
  <img src="./image/loading.jpg" alt="" data-src="./image/004.jpg">
  <img src="./image/loading.jpg" alt="" data-src="./image/005.jpg">
  <img src="./image/loading.jpg" alt="" data-src="./image/006.jpg">
  <img src="./image/loading.jpg" alt="" data-src="./image/007.jpg">
  <img src="./image/loading.jpg" alt="" data-src="./image/008.jpg">
  <img src="./image/loading.jpg" alt="" data-src="./image/009.jpg">
</div>

let box = document.querySelector('.box')
let imgs = document.querySelectorAll('img')
// 滚动区域可视高度
let boxHeight = box.clientHeight
// 懒加载实现
function lazyLoadImg() {
  // 盒子滚动出去的距离 + 盒子本身的高度
  let maxHeight = box.scrollTop + boxHeight
  for(let i = 0; i < imgs.length; i++) {
    // 当前img的offsetTop 小于 maxHeight，说明进入了可视区
    if(imgs[i].offsetTop < maxHeight) {
      // 创建一个缓存的Image
      // 好处：等图片完整下载完毕后直接显示，如果直接赋值给img的src
      // 当图片比较大时，会出现一格一格进行加载的情况
      let newImg = new Image()
      newImg.src = imgs[i].dataset.src
      newImg.onload = function() {
        imgs[i].src = newImg.src
      }
      // imgs[i].src = imgs[i].dataset.src
    }
  }
}
// 初始化
lazyLoadImg()
// 滚动加载
box.onscroll = function() {
  lazyLoadImg()
}