有效加载重复图像

Question

我偶然发现了这种奇怪的情况（对我而言），我可能会多次在html doc中有一个图像...让我们在一个html文件中说出相同图像的10倍。我很好奇这里可以使用什么样的优化，或者是否存在。

一些想法......

只加载可见的第一个？ 浏览器是否意识到它们是相同的并且更快地加载图片？ 对于这样的场景，有什么好的做法吗？

为了更详细地说明问题，我基本上有多个网页，其中一个使用一些JavaScript来切换内容。

所以我有：

 <div id='Page1'>
 <div id=masterheader ><img src=logo.png></div>
 <img src=logo.png>
 <!--content-->
 </div

 <div id='Page2'>
 <div class=header></div>
 <!--content-->
 </div

我使用JavaScript来获取master_header的内部html并将该html放在所有类标题中...我只是担心随着页面数量的显着增长，我的页面加载会受到我的徽标多次渲染的影响次。

Answer 1

不用担心 - 它将被缓存为相同的图像。

Answer 2

我相信实际只加载了1张图片。您只是多次显示图像。

测试一下。

将相同的图像放在同一页面上（因此它们都会显示）。确保它是large image（2或3 mb），以便您可以看到它们是否同时完成加载。