Html 浏览器是否会下载两次图像（如果'；在图像和#x27；s src以及一个div'；背景图像是什么？

由于必要但难以解释的原因，我在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>

标题{
背景：url（img/bg.jpg）中心固定透明；
}

---

编辑：感谢大家的精彩回答。我只是想再次检查并确保我没有导致用户重新下载这些非常大的图像。

不，浏览器将缓存它。但是，根据用户的设置，浏览器可能在下次请求页面时再次请求图像，例如，如果用户在页面访问之间清除缓存。

否，它将下载一次图像，然后将其放入浏览器缓存中。下次引用该URL时，它将从缓存中查找图像，而不是从服务器检索图像。

浏览器在缓存方面非常聪明。它应该只请求一次

此外，当它向服务器请求映像时，通常会随映像请求一起发送两个标头，告诉服务器。。嘿，我想要这张图片，但我已经有一张具有这些属性的图片了，上次你发给我的时候你告诉我了

然后服务器可以用

200

响应，这意味着它的内容不同

304

这意味着你拥有的内容是相同的，因此我不会再发送它，请使用你得到的内容

其中一种方法使用了，但还有一些方法

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

---

此外，interweb由一组缓存组成，这些缓存还将查看这些头值并为您返回内容。。这就是为什么网络的伸缩性如此之好；-）

我想它会下载一次，然后用现金支付。第二张图片将从现金中读取。@MiljanPuzović为了正确起见，你的意思是“缓存”而不是“现金”@BrianFunt谢谢，那是3年前的事了，我的英语很糟糕：）但是，如果我没有弄错，它将执行另一个

http

请求来检查缓存的有效性。@bPratik-否浏览器将在发出请求之前检查缓存。请参阅下面的引用。相同的逻辑是否不适用于其他静态内容？“不必要的HTTP请求发生在Internet Explorer中，但不会发生在Firefox中。在Internet Explorer中，如果外部脚本包含两次且不可缓存，则在页面加载过程中会生成两个HTTP请求。即使该脚本可缓存，用户重新加载页面时也会发生额外的HTTP请求。”@bPratik-将一切交给IE处理。即便如此，它仍然不会下载两次，本文假设脚本不可缓存。