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

时间:2016-07-21 00:46:10

标签: javascript html image reactjs

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

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

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

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

1 个答案:

答案 0 :(得分:0)

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