react 图片懒加载

一、react中useEffect监听事件需要在组件卸载前清除

  useEffect(() => {
      // throttl 是js节流函数，具体请参考lodash.js工具库
      window.addEventListener('scroll', throttle(checkAllImags));
      return () => {
        window.removeEventListener('scroll', throttle(checkAllImags));
      }
    }, []);

二、判断元素是否进入视图

const isInClietn = (el) => {
      // 获取元素
      let eldom = document.querySelector(el);
      // 获取元素具体视窗的距离
      let { top, right, bottom, left } = eldom.getBoundingClientRect();
      // 浏览器窗口
      let clientHeight = window.innerHeight;
      let clientWidth = window.innerWidth;
      return !(top > clientHeight || bottom < 0 || left > clientWidth || right < 0);
    };

三、滚动实时监听处理图片src

const checkAllImags = () => {
      var imgs = document.querySelectorAll('img');
      let index = 0;
      Array.from(imgs).map((item, inx) => {
        if (isInClietn(item) && inx > index) {
          let eldom = document.querySelector(item);
          eldom.src = eldom.getAttribute('data-src');
          index = inx + 1;
        }
      });
    };

四、图片组件设置，data-src是自定义属性

  <img
      data-src="www.xxx.com" // 真实的地址
      src="../../src/default.jpg" // 懒加载之前展示的图
    />;