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

城南花开ze

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

阅读量1.8k

点赞数 1

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

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

本文链接：https://blog.youkuaiyun.com/weixin_42614080/article/details/125691126

版权

一、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