图片懒加载

// getBoundingClientRect
export function imgLoad() {
    const viewHeight = document.documentElement.clientHeight || document.body.clientHeight; // 获取可视区高度
    const imgs = document.querySelectorAll('img[lazyload]');
    Array.prototype.forEach.call(imgs, (item) => {
        const src = item.getAttribute('data-src');
        if (!src) return;
        let rect = item.getBoundingClientRect() // 用于获得页面中某个元素的左、上、右和下分别相对浏览器的位置
        if (rect.bottom >=0 && rect.top < viewHeight) {
            item.setAttribute('src', src);
            item.removeAttribute('data-src')
            item.removeAttribute('lazyload')
        }
    })
}

// offsetTop 、scrollTop 和clientHeight 
export function imgLoad() {
    const viewHeight = document.documentElement.clientHeight || document.body.clientHeight; // 获取可视区高度
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条卷去的高度
    const imgs = document.querySelectorAll('img[lazyload]');
    Array.prototype.forEach.call(imgs, (item) => {
        const src = item.getAttribute('data-src');
        if (!src) return;
        if (offsetTop < scrollTop + viewHeight) {
            item.setAttribute('src', src);
            item.removeAttribute('data-src')
            item.removeAttribute('lazyload')
        }
    })
}

// IntersectionObserver
export function imgLoad() {
    const imgs = document.querySelectorAll('img[lazyload]');
    const observer = new IntersectionObserver(changes => {
      //changes 是被观察的元素集合
      for(let i = 0, len = changes.length; i < len; i++) {
        let change = changes[i];
        // 通过这个属性判断是否在视口中
        if(change.isIntersecting) {
          const imgElement = change.target;;
          imgElement.src = imgElement.getAttribute("data-src");
          observer.unobserve(imgElement);
        }
      }
    })
    Array.from(imgs).forEach(item => observer.observe(item));
}

外部调用：

  useEffect(() => {
    const load = throttle(imgLoad, 50) // 节流
    setTimeout(() => {
      document.addEventListener("scroll", load)
    }, 0)

    return () => {
      document.removeEventListener("scroll", load)
    }
  }, []);

html：

// 测试代码
      <div>
        <div style={{ height: '1500px', background: '#d9d9d9' }}>test</div>
        <div className="img-container">
          <div className="img-box"><img src="" data-src="https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg" lazyload="true" /></div>
          <div className="img-box"><img src="" data-src="https://tse4-mm.cn.bing.net/th/id/OIP.1lyXPxisZuw7MP5qGHayrgHaEc?w=266&h=180&c=7&o=5&pid=1.7" lazyload="true" /></div>
          <div className="img-box"><img src="" data-src="https://cn.bing.com/images/search?q=%e9%9b%aa%e4%ba%ba%e5%a3%81%e7%ba%b8&FORM=ISTRTH&id=93337C2EE651B7E39C435E7E7716AD6317A454F7&cat=%E5%A3%81%E7%BA%B8&lpversion=&disoverlay=1" lazyload="true" /></div>
          <div className="img-box"><img src="" data-src="https://cn.bing.com/images/search?q=%e8%8d%89%e8%8e%93%e5%a3%81%e7%ba%b8&FORM=ISTRTH&id=12005D64D853443405FA4995D85CD9AB52560087&cat=%E5%A3%81%E7%BA%B8&lpversion=&disoverlay=1" lazyload="true" /></div>
        </div>
        <div className="img-container">
          <div className="img-box"><img src="" data-src="https://cn.bing.com/images/search?q=%e8%ae%b0%e5%bd%95%e7%9a%84%e5%9c%b0%e5%b9%b3%e7%ba%bf+%e5%9c%86%e6%a1%8c%e5%b4%a9%e5%9d%8f&FORM=ISTRTH&id=268E732E92CD6ED8445EAD37D55E4ABE2016D772&cat=%E5%8A%A8%E6%BC%AB&lpversion=&disoverlay=1" lazyload="true" /></div>
          <div className="img-box"><img src="" data-src="https://cn.bing.com/images/search?q=%e5%bf%83%e7%81%b5%e5%a5%87%e6%97%85&FORM=ISTRTH&id=41DAC14150BF10A9291F22FC93371D819699A788&cat=%E5%8A%A8%E6%BC%AB&lpversion=&disoverlay=1g" lazyload="true" /></div>
          <div className="img-box"><img src="" data-src="https://cn.bing.com/images/search?q=%e6%82%a0%e5%93%89%e6%97%a5%e5%b8%b8%e5%a4%a7%e7%8e%8b+%e7%ac%ac%e4%b8%89%e5%ad%a3&FORM=ISTRTH&id=8CE2D357A99B1C82124CF87CDECF1D37E9C03316&cat=%E5%8A%A8%E6%BC%AB&lpversion=&disoverlay=1" lazyload="true" /></div>
          <div className="img-box"><img src="" data-src="https://cn.bing.com/images/search?q=%e6%bb%91%e5%86%b0%e5%a3%81%e7%ba%b8&FORM=ISTRTH&id=4D7B51664C19DEA2C1801B9C0C34C3DA6C7F4971&cat=%E5%A3%81%E7%BA%B8&lpversion=&disoverlay=1" lazyload="true" /></div>
        </div>
      </div>