javascript - 为什么切换图像的url src需要时间到 "load"？

Question

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

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

那么我的主图就是:<img src={this.state.imageUrl} alt="" />

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

Answer 1

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

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

当您像这样导入图像时，可能会发生两件事:如果图像非常小，则变量会被分配一个 dataURI，否则它会被分配一个常规 url，但该资源对“就绪”触发器有效，因此效果是一样的，图像立即就绪。

这有意义吗？

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