手写图片懒加载

方法一

窗口显示区的高度：window.innerHeight
图片到视窗上边距离的高度：getBoundingClientRect().top
获取全部图片元素，监听滚动事件，当图片到视窗顶部的距离小于可视区域的高度时，将自定义的属性赋给src属性，加载图片。

// 获取所有的图片元素
const images = document.querySelectorAll('img')
// 监听滚动事件
window.addEventListener('scroll', e => {
  images.forEach(image => {
    // 遍历图片，获取图片到视窗顶部的距离
    const imageTop = image.getBoundingClientRect().top
    // 图片到视窗顶部的距离小于可视区域的高度，显示图片
    if (imageTop < window.innerHeight) {
      // 取得自定义的 data-src 属性
      const data_src = image.getAttribute('data-src')
      // 将取得的自定义属性赋给 src 属性
      image.setAttribute('src', data_src)
    }
  })
})

方法二

InterSectionObserver
获取全部图片元素，并对其进行监听，当图片滚动到可视区域的时候，entry.isIntersecting 的值为 true，将自定义的属性赋给src属性，加载图片，之后取消监听动作以节约性能。

// 获取所有的图片元素
const images = document.querySelectorAll('img')
// 设置回调函数
const callback = entries => {
  entries.forEach(entry => {
    // 当图片滚动到可视区域的时候，entry.isIntersecting 的值为 true
    if (entry.isIntersecting) {
      // 获取图片节点
      const image = entry.target
      // 取得自定义的 data-src 属性
      const data_src = image.getAttribute('data-src')
      // 将取得的自定义属性赋给 src 属性
      image.setAttribute('src', data_src)
      // 取消监听动作
      observer.unobserve(image)
    }
  })
}
// 创建实例并传入 callback 回调函数
const observer = new IntersectionObserver(callback)
// 遍历图片，对所有图片进行监听
images.forEach(image => {
  ovserver.observe(image)
})