如何在React中按顺序渲染图片URL数组中的图片？

当前代码直接遍历URL数组渲染<img>标签，浏览器会同时发起所有图片的加载请求，请求完成时间取决于网络情况，因此会出现图片乱序显示的情况。要实现按顺序完成渲染，需要串行加载图片，即前一张图片加载完成后，再开始加载下一张。

方案一：逐步渲染并触发后续加载 #

通过状态跟踪已加载的图片索引，每张图片加载完成后再渲染下一张：

import { useState } from 'react';

function Images({ imgURLs }: { imgURLs: string[] }) {
  // 跟踪当前已加载到的图片索引，初始为0（第一张）
  const [currentLoadedIndex, setCurrentLoadedIndex] = useState(0);

  const handleImageLoad = () => {
    // 还没加载完所有图片时，加载下一张
    if (currentLoadedIndex < imgURLs.length - 1) {
      setCurrentLoadedIndex(prev => prev + 1);
    }
  };

  return (
    <div id="img-container">
      {/* 只渲染已加载到的图片范围 */}
      {imgURLs.slice(0, currentLoadedIndex + 1).map((url, index) => (
        <img
          key={url}
          src={url}
          // 只有当前最后一张加载完成后，才触发下一张加载
          onLoad={index === currentLoadedIndex ? handleImageLoad : undefined}
          style={{ display: 'block', margin: '8px 0' }}
        />
      ))}
    </div>
  );
}

方案二：预加载后逐个渲染 #

先按顺序预加载所有图片，每加载完成一张就添加到渲染列表中：

import { useState, useEffect } from 'react';

function Images({ imgURLs }: { imgURLs: string[] }) {
  // 保存已加载完成的图片URL
  const [loadedImgURLs, setLoadedImgURLs] = useState<string[]>([]);

  useEffect(() => {
    const loadInSequence = async () => {
      for (const url of imgURLs) {
        // 等待当前图片加载完成
        await new Promise((resolve, reject) => {
          const img = new Image();
          img.src = url;
          img.onload = () => resolve(url);
          img.onerror = () => reject(new Error(`加载图片失败: ${url}`));
        });
        // 加载完成后添加到渲染列表
        setLoadedImgURLs(prev => [...prev, url]);
      }
    };

    loadInSequence();
  }, [imgURLs]);

  return (
    <div id="img-container">
      {loadedImgURLs.map(url => (
        <img
          key={url}
          src={url}
          style={{ display: 'block', margin: '8px 0' }}
        />
      ))}
    </div>
  );
}

方案说明 #

• 方案一：图片会逐步出现在页面中，每加载完一张才开始加载下一张，适合希望用户尽快看到部分内容的场景。
• 方案二：会在后台按顺序预加载图片，加载完成一张就显示一张，整体加载过程在后台串行执行。

内容的提问来源于stack exchange，提问作者utg.tdawg