图片懒加载

getBoundingClientRect

getBoundingClientRect方法可以获取元素的大小和距离视口左/上方的距离，可以通过以下算式判断元素是否出现在视口中。
img.getBoundingClientRect().top - clientHeight < 0
首先将图片url存放到data-src属性中，另外需要给图片设置width、height属性来占位，然后为页面滚动事件添加事件处理程序，滚动时判断每个图片元素是否出现在视口中。
另外为了减少性能消耗，可以利用节流来减少滚动事件处理程序的执行频率。
完整代码如下：
// 节流
function fn(cb,delay=300){
    let timer
    return function(...args){
        if(!timer){
            cb.call(null,...args)
            timer = setTimeout(()=>{
                timer = null
            },delay)
        }
    }
}

function imgLoad(){
    const clientHeight = document.documentElement.clientHeight
    const imgs = document.querySelectorAll("img[data-src]")
    console.log(1, imgs[imgs.length-1].getBoundingClientRect().top -  clientHeight );
    for(img of imgs){
        if(img.getBoundingClientRect().top - clientHeight < 0){
            img.setAttribute('src', img.getAttribute('data-src'))
            img.removeAttribute('data-src')  // 移除属性，避免之后又被获取
        }
    }
}

const handleImgLoad = fn(imgLoad)
document.addEventListener('scroll',handleImgLoad)
 

InterSectionObserver

Web为开发者提供了 IntersectionObserver 接口，它可以异步监听目标元素与其祖先或视窗的交叉状态，注意这个接口是异步的，它不随着目标元素的滚动同步触发，所以它并不会影响页面的滚动性能。
IntersectionObserver 构造函数接收两个参数，回调函数以及配置项。
  • root：所监听对象的具体祖先元素，默认是 viewport ；
  • rootMargin：计算交叉状态时，将 margin 附加到祖先元素上，从而有效的扩大或者缩小祖先元素判定区域；
  • threshold：设置一系列的阈值，当交叉状态达到阈值时，会触发回调函数。
IntersectionObserver 实例执行回调函数时，会传递一个包含 IntersectionObserverEntry 对象的数组，该对象一共有七大属性：
  • time：返回一个记录从 IntersectionObserver 的时间原点到交叉被触发的时间的时间戳；
  • target：目标元素；
  • rootBounds：祖先元素的矩形区域信息；
  • boundingClientRect：目标元素的矩形区域信息，与前面提到的 Element.getBoundingClientRect() 方法效果一致；
  • intersectionRect：祖先元素与目标元素相交区域信息；
  • intersectionRatio：返回intersectionRect 与 boundingClientRect 的比例值；
  • isIntersecting：返回一个布尔值，如果目标元素与交叉区域观察者对象 (intersection observer) 的根相交，则返回 true.如果返回 true, 则 IntersectionObserverEntry 描述了变换到交叉时的状态; 如果返回 false, 那么可以由此判断，变换是从交叉状态到非交叉状态。
完整代码
function observe() {
  const observer = new IntersectionObserver(
    (changes) => {
      console.log(changes);
      changes.forEach(function (change) {
        if (change.isIntersecting) {
          const img = change.target;
          img.setAttribute("src", img.getAttribute("data-src"));
          img.removeAttribute('data-src')
          observer.unobserve(img);
        }
      });
    },
    {
      root: null,
      rootMargin: "0px",
    }
  );

  const imgs = document.querySelectorAll("img[data-src]");
  for (img of imgs) {
    observer.observe(img);
  }
}

observe();