为什么切换图像的 url src 需要时间来"load"反应？

Question

>我有一个数组中的图像网址列表：const arr = [url1, url2, url3, url4, url5].我遍历其中的每一个并在页面上显示所有图像。我还在他们所在的div 上附加了一个onClick，以将"主"图像切换到侧面。

{arr.map(url => {
return ( 
<div onClick={() => this.setState({ imageUrl: url})}>
<img src={url} alt=""/>
</div> 
);
})}

那么我的主要形象只是：<img src={this.state.imageUrl} alt="" />

所有这些都工作得很好，但奇怪的是，当我单击其中一个缩略图来切换主图像时。"加载"似乎需要一些时间。我检查了主图像，网址立即切换，所以我不确定为什么它似乎在"加载"。这是预期行为还是我的应用程序中的其他行为？

Answer 1

如果该图像只是一个静态 url 字符串，那么当您分配它时，您告诉 img 元素从 url 加载图像 - 所以是的，除非它已经加载到页面资源中，否则加载需要时间。

如果您要像import imageUrl from './whatever.png';一样导入图像 URL 并将导入的资源分配给 img src 属性，则被视为已加载的模块首先需要加载图像 - 在这种情况下，图像将立即更改，因为资源已经加载。

当你像这样导入图像时，可能会发生两件事：如果图像非常小，则为变量分配一个 dataURI，否则它被分配一个常规 url，但该资源计入"ready"触发器，因此效果是相同的，图像立即准备就绪。

这有意义吗？

据我所知，这应该是一个标准的 React 功能，但我一直在使用弹出create-react-app项目 - 所以可能需要一些 webpack 插件来完成这项工作 - 不确定这一点。