有效地加载重复的图像 [英] Load Duplicate Images efficiently

问题描述

我偶然遇到这种奇怪的情况（对我来说），我可能会在一个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 ...只是担心页面的数量可能会显着增加，我的页面加载会如何影响我的标志多次渲染。

解决方案

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

测试出来。

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

I stumbled across this weird situation(to me) where I might have an image in a html doc multiple time ... lets say 10 times the exact same image in one html file. I was curious what kind of optimization could be used here or if any exist.

some thoughts...

Only load visible first ? Does the browser realize they are the same and more quickly load the pics? whats good practice for a scenario like this?

To put a little more detail into the question I have essentially multiple web pages in one using some JavaScript to switch in content.

so i have:

 <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

Im using JavaScript to grab the inner html of the master_header and place that html in all the class headers... Im just worried as the amount of pages might grows significantly how will my page load be affected by my logo being rendered multiple times.

解决方案

Only 1 image is actually loaded I believe. You are just displaying the image multiple times.

Test it out.

Put the same image on the same page (so they are both displayed). Make sure it is a large image (2 or 3 mb) so that you can see if they both finish loading at the same time.

这篇关于有效地加载重复的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！