更快捷的使用图像的方式

Question

我有一个图像在单个页面加载100个div中加载100次，例如：

<div> 
  <img src="same.jpg">
</div>
.
.
.
.
<div> 
  <img src="same.jpg">
</div>

是否有任何有效的方法来优化图像加载或加载一次并使用所需的次数？使用CSS“background-image”反而更快？

Answer 1

浏览器缓存图像，因此不会加载数百次。以下是两者之间的广泛比较：When to use IMG vs. CSS background-image?

Answer 2

图像只能由浏览器加载一次。浏览器意识到这些URL都指向同一个图像，它不会出去下载100次。请参阅浏览器开发人员工具的网络选项卡以确认这一点。