如果在图像的src和div的背景图像中使用浏览器,浏览器会下载两次吗？

Question

由于这里有必要但很难解释的原因,我设置了一个绝对定位的图像以及div上的背景图像.

我想确保一旦浏览器抓住这些图像(它们非常大),它就不会重新抓取它们.

让我们假装bg.jpg下面代码中的图像是500KB.以下代码是否会导致浏览器将图像整体下载两次,总共1000KB？

<style>
    header {
        background: url(img/bg.jpg) center center fixed transparent;
    }
</style>

<header>
    <img src="img/bg.jpg" width="500" height="500">
</header>

编辑:谢谢大家的优秀答案.我只是想仔细检查并确保我没有让用户重新下载这些非常大的图像.

Answer 1

浏览器在缓存方面非常聪明.它应该只需要一次.

另外,当它向服务器询问图像时,它通常会发送图像请求,一些告诉服务器的标题..嘿,我想要这个图像,但我已经有一个已经具有这些属性,你告诉我关于它,你上次发给我的时候.

然后服务器可以回复200意思是它的内容不同304意味着你拥有的内容是相同的,所以我不会再发送它,使用你得到的那个.

其中一种方法使用ETAG标头,但还有一些方法.

您的服务器需要支持这一点,但大多数都支持.

此外,interweb由一堆缓存组成,它们也会查看这些标题值并为您返回内容.这就是为什么Web可以很好地扩展;-)

Answer 2

不,浏览器会缓存它.然而,取决于用户的设置,浏览器可以在下次请求页面时再次请求图像,例如,如果用户在页面访问之间清除其缓存.