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，这意味着你拥有的内容是相同的，所以我不会再发送它，使用你得到的那个...... / p>

其中一种方法使用ETAG header，但还有一些方法。

您的服务器需要支持此功能，但大部分都支持。

此外，interweb由一堆缓存组成，它们也会查看这些标题值并为您返回内容。这就是网络扩展得如此之好的原因; - ）

Answer 2

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

Answer 3

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

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

3 个答案: