懒加载静态资源

懒加载

当我们需要加载静态资源（比如图片）时，可以判断元素是否出现在可视区域，当即将出现时再加载，以此节省带宽

• 方法一：通过判断视口高度与元素距离文档顶部的高度和滚动条卷去的高度的差值，确定元素是否出现在可视区域

    const box = document.querySelector('.box')
    // 获取视口高度
    let clientHeight = document.documentElement.clientHeight
    // 元素相对于文档顶部的高度
    const offsetTop = box.offsetTop
    
    // 监听滚动事件
    addEventListener('scroll', () => {
      // 滚动条卷去的高度
      let scrollTop = document.documentElement.scrollTop
      // 判断是否出现在可视区
      if (offsetTop - scrollTop <= clientHeight) {
        console.log('元素出现在可视区')
      }  
    })

• 方法二：通过getBoundingClientRect API

	const box = document.querySelector('.box')
    // 获取视口高度
    let clientHeight = document.documentElement.clientHeight
	// 监听滚动事件
    addEventListener('scroll', () => {
      // getBoundingClientRect() 返回元素相对于视口的布局位置信息
      const position = box.getBoundingClientRect()
      // 元素相对于视口的高度
      let top = position.top
      // 判断是否出现在可视区
      if (top <= clientHeight) {
        console.log('元素出现在可视区')
      }

    })

• 方法三

	// Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法
    const io = new IntersectionObserver(() => {
      console.log('出现在可视区域')
    })
    io.observe(box)