在React中更改<img/>标记上的src时，图像加载滞后

Question

我写了一个类似于组件的图库，它采用以下格式的对象数组：

{
  ...
  title: string,
  url: string (the image url)
  ...
}

图库有一个下一个按钮，可让您遍历数组，显示标题等数据并在标记中显示图像。当文本字段立即显示时，img标记稍微滞后，显示前一个图像一两秒，然后显示下一个。

知道如何防止这种情况吗？或者至少让第一张图像立即消失？

Answer 1

有许多方法可以解决这个问题，包括复杂性和优雅。我能想到的最简单的方法是：将src更改为即时加载的内容，然后将其更改为新的img。您可以使用base64透明gif（就像嵌入代码中的图像） - https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/