当相同图像的多个实例嵌入到HTML中时,会将图像加载一次吗？

概述如果我在单页内使用相同的图像多次，会分别加载带宽和流量，还是只加载一个图像，休息嵌入代码将重新使用图像？ 例如，假设我这样做： <img src = 'http://img.to/image.jpg"/><img src = 'http://img.to/image.jpg"/><img src = 'http://img.to/image.jpg"/><img src = 'http:// 如果我在单页内使用相同的图像多次，会分别加载带宽和流量，还是只加载一个图像，休息嵌入代码将重新使用图像？

例如，假设我这样做：

<img src = 'http://img.to/image.jpg"/><img src = 'http://img.to/image.jpg"/><img src = 'http://img.to/image.jpg"/><img src = 'http://img.to/image.jpg"/><img src = 'http://img.to/image.jpg"/><img src = 'http://img.to/image.jpg"/>...<img src = 'http://img.to/image.jpg"/><img src = 'http://img.to/image.jpg"/>

而image.jpg是100kb。当浏览器加载此页面时，会浪费流量(100Kb *#的img标签)吗？或者只是加载一个image.jpg并重新使用它的其余标签？

解决方法 尝试一下 – 在查看缓存问题时，FireBUG for firefox或Chrome中的开发工具等工具非常有益。如果您打开“Net”面板并重新加载页面，您将看到每个项目发送了什么http状态代码。 304(未修改)表示该项目是从缓存中本地检索的。

正如dthorpe所说，缓存头在这里很重要。除了确保“无缓存”尚未设置之外，如果您可以访问服务器配置，则应该是主动的 – 如果您知道资源不会改变，那么您应该确保设置一个’Expires’标头(它告诉浏览器一个日期，之后缓存的副本应该被认为是陈旧的)或一个’Cache-Control：max-age’标题(它提供了几天/小时而不是一个设定的日期)。

您可以为不同的MIME类型/文件夹设置不同的时间尺度，这样可以让客户端数据经常刷新HTML内容，但是图像和样式表很少。

这是一个很好的intro video/article由Google值得一试。

总结

以上是内存溢出为你收集整理的当相同图像的多个实例嵌入到HTML中时,会将图像加载一次吗？全部内容，希望文章能够帮你解决当相同图像的多个实例嵌入到HTML中时,会将图像加载一次吗？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。