有效加载重复图像答案

【问题标题】：Load Duplicate Images efficiently有效加载重复图像
【发布时间】：2013-07-14 04:00:21
【问题描述】：

我偶然发现了这种奇怪的情况（对我来说），我可能在一个 html 文档中多次包含一个图像......假设一个 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 放置在所有类标题中...我只是担心页面数量可能会显着增长，我的页面加载将如何受到我的徽标被渲染多个的影响次。

【问题讨论】：

我相信实际上只加载了一张图片。您只是多次显示它。测试一下。将相同的图像放在同一页面上（因此它们都会显示）。确保它是一个大图像（2 或 3 mb），以便您可以查看它们是否同时完成加载。
感谢您提供我一直在寻找的答案
测试并确认:)
太好了，我补充说作为答案。如果您能接受，我将不胜感激 c:
虽然图像仅通过网络加载一次，但仍会将更多元素渲染到 DOM 树中。

标签： javascript jquery html performance dom

【解决方案1】：

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

【讨论】：

【解决方案2】：

我相信只有1 图像实际上已加载。您只是多次显示图像。

测试一下。

将同一张图片放在同一个页面上（这样它们都会显示出来）。确保它是 large image（2 或 3 mb），以便您可以查看它们是否同时完成加载。

【讨论】：