图片懒加载 lazyload

了解

图片懒加载是一种网页性能优化的方法，能够极大的提升用户的体验效果，现代一张图片都有可能是几兆的问题，加入100张图片你进入页面难道就直接全部请求，这得要多卡，所以使用图片懒加载的形式，只请求可视区域的图片链接资源，这样能够大幅度减少请求次数从而做到体验优化。

还有一种说法就是图片不直接进行展示，而是在请求途中通过一个 loading 的加载图片进行等待，并最终直接让图片直接完全展示，不用等待缓慢的一步步展示。

---

代码

  // window.innerHeight 获取视口显示区域的高度
  // Element.getBoundingClientRect()  元素的大小及其相对于视口的位置

  let images = document.querySelectorAll('img')

  window.addEventListener('scroll', e => {
    images.forEach(img => {
      let imgTap = img.getBoundingClientRect().top
      if(imgTap < window.innerHeight) { // 证明该图片在视口区域
        let dataSrc = img.getAttribute('data-src')
        img.setAttribute('src',dataSrc)
        console.log('图片加载')
      }
    })
  })

以上的方法实现了图片的 lazyload 效果，但是每次滑动频繁的性能消耗不太雅观，是需要我们自己手动去进行个判断来停止频繁的性能消耗。

---

效果

通过 IntersectionObserver API 实现完整的效果
该方法效果很明显，操作简洁上手

// IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。

// IntersectionObserver 的disconnect()方法终止对所有目标元素可见性变化的观察。
// IntersectionObserver 对象的observe() 方法向IntersectionObserver对象监听的目标集合添加一个元素。一个监听者有一组阈值和一个根， 但是可以监视多个目标元素，以查看这些目标元素可见区域的变化。调用IntersectionObserver.unobserve()方法可以停止观察元素。
// IntersectionObserver的unobserve() 方法命令IntersectionObserver停止对一个元素的观察。 

// 基于视口对于元素进行观察监视,

  let images = document.querySelectorAll('img')
  let ob = new IntersectionObserver(arg => {
    arg.forEach(item => {
   	  console.log(item)
      if (item.isIntersecting) {  // isIntersecting: true 可以理解为是否已监视
        let img = item.target
        let data_src = img.getAttribute('data-src')
        img.setAttribute('src', data_src)
        ob.unobserve(img) // 关闭监视
        console.log('观察完毕');
      }
    })
  })

  images.forEach(img => {
    ob.observe(img) // 将这些 img 作为监视对象
  })

---