JS 图片懒加载

方案一：监听滚动

TIP

监听图片顶部到达视口底部，把自定义属性 data-src赋值给src

const images = document.querySelectorAll('img')
window.addEventListener('scroll', (e) => {
  images.forEach(
    (image) => {
      const imageTop = image.getBoundingClientRect().top
      if (imageTop < window.innerHeight) {
        const data_src = image.getAttribute('data-src')
        image.setAttribute('src', data_src)
      }
    }
  )
})

方案二：观察者

const images = document.querySelectorAll('img')
function callback(enteries) {
  enteries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target
      const data_src = img.getAttribute('data-src')
      img.setAttribute('src', data_src)
      observer.unobserve(img)
    }
  })
}
const observer = new IntersectionObserver(callback)
images.forEach((image) => {
  observer.observe(image)
})