9. 图片懒加载

图片懒加载的优化处理：

• 图片全部加载完成后移除事件监；
• 加载完的图片，从 imgList 移除

图片使用 data-src 而不是 src 保存 URL，当滚动到指定位置时显示图片。

let imgList = [...document.querySelectorAll('img')]
const length = imgList.length

const imgLazyLoad = (() => {
  let count = 0

  return () => {
    const deleteIndexList = []
    imgList.forEach((img, index) => {
      const rect = img.getBoundingClientRect()
      if (rect.top < window.innerHeight) {
        img.src = img.dataset.src
        deleteIndexList.push(index)
        count++
        if (count === length)
          document.removeEventListener('scroll', imgLazyLoad)
      }
    })
    imgList = imgList.filter((img, index) => !deleteIndexList.includes(index))
  }
})()

// 这里最好加上防抖处理
document.addEventListener('scroll', imgLazyLoad)