React：在更新之前显示加载上一张图像

Question

我有一张图像每 1 分钟重新加载一次。每完成 1 分钟，就会获取新图像。 （我用的是img的src属性里面的内嵌链接），像

<img src={link} />

.

问题是在加载和获取新图像时，该图像组件消失了，稍后在获取新图像时，它将显示该新图像。 我的要求是在加载新图像并替换旧图像之前显示正在加载... 在上一个图像上。 总之就是不希望旧的消失新的出现。我想保留一个带有加载叠加文本的旧图像，并用新内容替换该图像并隐藏加载...文本。

  const [isLoading, setIsLoading] = useState(true);

内部回报：

 <div className={styles.wrapper} style={{ opacity: isLoading ? "0.3" : "1" }}>
    <img src={src} onLoad={() => setIsLoading(false)} />
    <div>
      {isLoading && (
        <div className={styles.overlayLoading}>
          Loading...
        </div>
      )}
    </div>
  </div>

Answer 1

您需要创建一个额外的隐藏 img 标签，用于加载新图像，然后当 onload 事件触发时，您可以将现有 img 标签中的 src 属性切换到新图像，它将立即更新，因为图像现在在本地缓存。

可以在这个问题上找到有关如何执行此操作的几个示例在加载新图像时显示“正在加载”

Answer 2

您可以使用 useEffect 预加载图像，您的浏览器将缓存来自服务器的响应，当您使用相同的 url 请求相同的图像时，浏览器将从缓存中获取该图像。您还可以给浏览器几毫秒的时间来呈现新图像，然后您可以切换加载状态。

  const [isLoading, setIsLoading] = useState(true);
  const [cachedImageUrl, setCachedImageUrl] = useState("");

  useEffect(() => {
   setIsLoading(true);
   const image = new Image();

   image.onload = () => {
     setCachedImageUrl(src);
     const renderedInterval = setTimeout(() => setIsLoading(false), 100);
   }

   image.src = src;

   return () => {
     image.onload = ()=>{}
     clearInterval(renderedInterval); 
   }
  }, [src]);

  return (
    <div className={styles.wrapper} style={{ opacity: isLoading ? "0.3" : "1" }}>
    <img src={cachedImageUrl} />
    <div>
      {isLoading && (
        <div className={styles.overlayLoading}>
          Loading...
        </div>
      )}
    </div>
  </div>
  );