React：实现图片更新时在旧图上显示加载覆盖层的问题

你的核心问题在于直接修改img的src属性会导致浏览器立即卸载旧图并加载新图，这段间隙里页面会出现空白。要实现「保留旧图+加载覆盖层+新图加载完成后替换」的效果，核心是预加载新图片，等新图完全加载好再替换页面上的图片。

调整后的实现思路 #

1. 维护两个状态：一个存当前显示的图片地址（确保页面始终有图），另一个控制加载覆盖层的显示
2. 每次需要刷新时，先创建隐藏的Image对象预加载新图
3. 新图加载完成后，再更新页面上img的src，同时关闭加载状态
4. 用定时器每1分钟触发一次刷新逻辑

完整代码示例 #

import { useState, useEffect, useRef } from 'react';
import styles from './YourComponent.module.css';

const AutoRefreshImage = ({ initialSrc }) => {
  // 当前显示的图片地址，初始值为传入的初始链接
  const [currentSrc, setCurrentSrc] = useState(initialSrc);
  // 加载状态，仅在预加载新图时为true
  const [isLoading, setIsLoading] = useState(false);
  // 定时器引用，用于组件卸载时清除定时器
  const intervalRef = useRef(null);

  // 预加载图片的函数
  const loadNewImage = () => {
    setIsLoading(true);
    // 加时间戳避免浏览器缓存旧图，替换成你的新图获取逻辑
    const newImageSrc = `${initialSrc}?t=${Date.now()}`;
    
    const img = new Image();
    img.src = newImageSrc;
    img.onload = () => {
      // 新图加载完成，更新当前显示的图片
      setCurrentSrc(newImageSrc);
      setIsLoading(false);
    };
    img.onerror = () => {
      // 加载失败时关闭加载状态，可按需添加错误提示
      setIsLoading(false);
      console.error('图片加载失败');
    };
  };

  // 初始化定时器，每1分钟触发一次刷新
  useEffect(() => {
    intervalRef.current = setInterval(() => {
      loadNewImage();
    }, 60 * 1000);

    // 组件卸载时清除定时器
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, [initialSrc]);

  return (
    <div className={styles.wrapper}>
      {/* 始终显示当前已加载完成的图片 */}
      <img 
        src={currentSrc} 
        alt="自动刷新图"
        style={{ opacity: isLoading ? 0.3 : 1 }}
      />
      {/* 加载覆盖层，仅在预加载时显示 */}
      {isLoading && (
        <div className={styles.overlayLoading}>
          Loading...
        </div>
      )}
    </div>
  );
};

export default AutoRefreshImage;

对应的CSS样式（示例） #

.wrapper {
  position: relative;
  /* 根据你的图片尺寸设置容器大小 */
  width: 600px;
  height: 400px;
}

.wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.overlayLoading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

关键细节说明 #

• 预加载机制：通过独立的Image对象加载新图，避免直接修改页面img的src导致旧图消失
• 状态控制：currentSrc始终保存已加载完成的图片地址，确保页面不会出现空白
• 加载层时机：仅在预加载新图时打开isLoading，加载完成后立即关闭，不影响正常显示
• 缓存处理：给图片链接添加时间戳，避免浏览器缓存旧图，确保每次获取最新图片

内容的提问来源于stack exchange，提问作者Siri