react 中实现图片分批加载优化加载卡顿问题

城南花开ze

已于 2022-07-09 13:35:24 修改

阅读量1.7k

点赞数 1

分类专栏： React 文章标签： react.js javascript

于 2022-07-09 11:16:21 首次发布

本文链接：https://blog.csdn.net/weixin_42614080/article/details/125691126

版权

React 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

一、react 中实现图片分批加载优化加载卡顿问题

在 react 中，当页面图片数量太多时，一次性请求所有的图片，会很卡顿造成用户的体验不好，可以采用分批加载的方式去请求图片进行优化。
对于优化的实现思路，先将所要渲染 image 的 url 置空。在 loadImages 函数中，needToLoadList 为所有图片的路径，maxLoadedNum 为最大加载数量，curLoadedImgList 为正在加载的图片列表，loadIndex 为当前加载的图片索引，imagedoms 为所要渲染的图片 DOM。startLoadImg 开始加载图片，可以理解为队列的入栈出栈，当正在加载的图片列表小于最大加载数量，入栈，加载完后出栈，后面的图片列表继续入栈，依次递进。若全部加载完毕则整个队列的入栈出栈的流程结束。removeAndReloadImg 是删除图片，开始下一轮加载，代码如下所示：

function loadImages(imageList, maxLoadingNum) {
  const needToLoadList = imageList; 
  const maxLoadedNum = maxLoadingNum; 
  const curLoadedImgList: string[] = []; 
  let index = 0; 
  let imagesIdList = []; 
  const imagedoms = document.querySelectorAll('.imageName');
  
  function startLoadImg() {
     if (curLoadedImgList.length >= maxLoadedNum) {
      return;
    }

    if (needToLoadList.length <= 0) {
      return;
    }
    
    const img = imagedoms[index];
    const src = needToLoadList.shift();
    if (!src) {
      return;
    }
    
    curLoadedImgList.push(src);
    imagesIdList.push(src.imageId);
    img.setAttribute('src', src);
    img.setAttribute('data-imageId', src.imageId);
    img.setAttribute('data-index', `${index}`);
    img.addEventListener('load', (e) => {
      removeAndReloadImg(e, true, img);
    });
    img.addEventListener('error', (e: any) => {
      removeAndReloadImg(e, false, img);
    });
    index += 1;
    startLoadImg();
   }
   
   function removeAndReloadImg(e, success, img) {
     if (e.path.length) {
       const curSrc = e.path[0].src;
       const loadedImageId = Number(e.target.getAttribute('data-imageId'));
       curLoadedImgList.splice(curLoadedImgList.findIndex(item => item.imageId === loadedImageId), 1);
       startLoadImg();
     }
   }
   
   return {
     startLoadImg,
     removeAndReloadImg
   }
}

在使用时，先将 image 的 src 置空，调用 loadImages 中的 startLoadImg，并且传入 imageList, maxLoadingNum 就可以，如下所示:

loadImages(imageList, maxLoadingNum).startLoadImg();