如果将两次它在这两个图像的src使用，以及一个div的背景图像浏览器下载图像？ [英] Will browser download image twice if it's used in both an image's src as well as a div's background-image?

问题描述

由于是必要的，但很难解释我在这里同时设置绝对定位的形象，以及在一个div的背景图像。原因

Due to reasons that are necessary but difficult to explain here I am setting both an absolutely positioned image as well as a background image on a div.

我要确保，一旦浏览器已经抓住了这些图像（他们是非常大的），它不会再去抓他们。

I want to make sure that once the browser has grabbed these images (they're very large) it doesn't re-grab them.

让我们pretend在以下code图像 bg.jpg 为500KB。请问下列code导致浏览器下载图像整体两次共计1000KB的？

Let's pretend the image bg.jpg in the following code is 500KB. Does the following code cause the browser to download the image in its entirety twice for a total of 1000KB?

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

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

修改：谢谢大家的优秀的答案。我只是想仔细检查，并确保我不会引起用户重新下载这些图像非常大。

EDIT: Thank you all for your excellent answers. I just wanted to double check and make sure I wasn't causing the user to re-download these very large images.

推荐答案

浏览器是pretty聪明，当涉及到caching.It应该只要求一次。

Browsers are pretty smart when it comes to caching.It should only ask for it once.

此外，当它要求服务器为图像，通常与该图片的请求发送，一对夫妇的头，告诉服务器..嘿，我想这个形象，但我得到了一个已经具有这些属性，这些属性你告诉我，你把它交给我，它最后一次。

Additionally when it asks the server for an image, it usually sends with the request for the image, a couple of headers that tell the server.. Hey, I want this image, but I got one already that has these attributes that you told me about it last time you sent it to me.

然后，服务器可以回应一个 200 这意味着它不同的内容 304 这意味着你有一个是相同的，所以我不会再次发送，用你得到了一个..

The server can then respond with a 200 meaning it's different content 304 meaning the one you have is the same, so I won't send it again, use the one you got..

其中一个方法使用一个 ETAG头，但也有几个。

One of these methods uses an ETAG header, but there are a few more.

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

Your server needs to support this, but most do.

此外，该interweb是由一堆缓存，这也将看这些排序标头值的和返回的东西..这就是为什么网页尺度这么好; - ）

Additionally, the interweb is made up of a bunch of caches, which will also look at these sort of header values and return stuff for you.. That's why the web scales so well ;-)

这篇关于如果将两次它在这两个图像的src使用，以及一个div的背景图像浏览器下载图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！