javascript - 在 React 中更改 标签上的 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/