图片懒加载简单的实现方式

1. 通过监听滚动事件，判断图片相对于视口的位置是否小于浏览器视口的高度。

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)
      }
    })
  })

缺点是执行的次数很多，而且图片已经加载过了还是会判断

2. 通过IntersectionObserver(https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver)

const images = document.querySelectorAll('img')
  const callback = entries => {
    entries.forEach(entry => {
      console.log(entry)
      if (entry.isIntersecting) {
        const image = entry.target
        const data_src = image.getAttribute('data-src')
        image.setAttribute('src', data_src)
        console.log('触发了事件')
        observe.unobserve(image)
      }

    })
  }
  const observe = new IntersectionObserver(callback)
  images.forEach(image => {
    observe.observe(image)
  })

优点是观察过一次后可以解绑，执行次数大大减少。缺点是ie不兼容