Будет ли браузер загружать изображение дважды, если он используется как в изображении src, так и в фоновом изображении div?

Из-за причин, которые необходимо, но трудно объяснить здесь, я устанавливаю как абсолютно позиционированное изображение, так и фоновое изображение на div.

Я хочу убедиться, что как только браузер захватит эти изображения (они очень большие), он не перехватит их.

Сделайте вид изображения bg.jpg в следующем коде 500KB. Предоставляет ли следующий код браузеру, чтобы загрузить изображение в полном объеме дважды в общей сложности 1000 КБ?

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

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

EDIT: Спасибо всем за отличные ответы. Я просто хотел дважды проверить и убедиться, что я не заставляю пользователя повторно загружать эти очень большие изображения.

Ответ 1

Браузеры довольно умны, когда дело доходит до кеширования. Он должен только просить об этом один раз.

Кроме того, когда он запрашивает сервер для изображения, он обычно отправляет запрос на изображение, пару заголовков, которые сообщают серверу. Эй, я хочу этот образ, но у меня есть тот, у кого есть эти атрибуты, которые вы рассказали мне об этом в прошлый раз, когда вы отправили его мне.

Затем сервер может ответить с помощью 200, означающего, что это разное содержимое 304 означает, что у вас есть одно и то же, поэтому я не буду отправлять его снова, используйте тот, который у вас есть.

Один из этих методов использует заголовок ETAG, но есть еще несколько.

Ваш сервер должен поддерживать это, но большинство из них.

Кроме того, interweb состоит из кучки кешей, которые также будут смотреть на эти значения заголовков и возвращать вам материал.. Вот почему веб-масштабирование настолько хорошо; -)

Ответ 2

Нет, браузер будет кэшировать его. Однако в зависимости от пользовательского параметра браузер может снова запросить изображение при следующем запросе страницы, например, если пользователь очистит кеш между посещениями страниц.

Ответ 3

Нет, он будет загружать его один раз и затем помещаться в кеш браузера. В следующий раз, когда этот URL ссылается, он будет искать изображение из кеша, а не извлекать его с сервера.