图片懒加载

<div class="img-area">
  <img class="my-pic" alt="loading" data-src="./img/img1.png" />
</div>


//图片什么时候出现在可视区域内
function isInSight(el) {
  const rect = el.getBoundingClientRect()
  //这里我们只考虑向下滚动
  const clientHeight = window.innerHeight
  // 这里加50为了让其提前加载
  return rect.top <= clientHeight + 50
}
//data-src的属性值代替src属性值
function loadImg(el) {
  if (!el.src) {
    const source = el.dataset.src
    el.src = source
  }
}
let index = 0
function checkImgs() {
  const imgs = document.querySelectorAll('.my-pic')
  for (let i = index; i < imgs.length; i++) {
    if (isInSight(imgs[i])) {
      loadImg(imgs[i])
      index = i
    }
  }
}