手写图片懒加载

• 实现思路：img的src默认是loading图片，当图片的高度 < 视口高度 + 滚动高度时，再替换img的src

<!-- 第一张图片是loading图片，data中的是要加载的图片 -->
<img src="./img/loading.gif" data-src="./img/1.jpg" alt="">
<img src="./img/loading.gif" data-src="./img/2.jpg" alt="">
<img src="./img/loading.gif" data-src="./img/3.jpg" alt="">
<img src="./img/loading.gif" data-src="./img/4.jpg" alt="">
<img src="./img/loading.gif" data-src="./img/5.jpg" alt="">
<img src="./img/loading.gif" data-src="./img/6.jpg" alt="">
<script>
  // 获取所有图片
  const imgList = document.getElementsByTagName('img')
  // 获取视口的高度
  let ch = document.documentElement.clientHeight
  let len = imgList.length
  // 定义懒加载函数
  const imgLazy = function (event) {
    for (let i = 0; i < len; i++) {
      // 判断图片高度是否等于视口高度与滚动高度的和
      if (imgList[i].offsetTop < document.documentElement.scrollTop + ch) {
        // 改变图片的src
        imgList[i].src = imgList[i].dataset.src
      }
    }
  }
  // 监听滚动事件与onload事件
  window.onscroll = imgLazy
  window.onload = imgLazy
</script>