Вопрос по кешу браузера (картинки в css)?

Question

[Алексей Лебедев]

Есть проект онлайн игры (html, JS). Изначально происходит загрузка всех файлов игры.


Есть css файл, содержащий ссылки на кучу картинок. Что бы картинки попали в кеш, нужно грузить только его или его и все картинки по отдельности?


И вопрос: В каких браузерах будет это работать?

Answer 1

[Виталий Желтяков]

Вопрос поставлен крайне плохо, поэтому сразу представлю общее решение.

.htaccess
Разрешение кеширования файлов на стороне клиента
<IfModule mod_headers.c>
Header append Vary User-Agent
<FilesMatch .*\.(js|css|html)$>
Header set Cache-control: private

<FilesMatch .*\.(gif|jpg|png)$>
Header set Cache-control: public


# Включение заголовка Expires для всех файлов сроком на месяц
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault «access plus 1 month»
# Выключение Expires для PHP-скриптов
<FilesMatch .*\.(php)$>
ExpiresActive Off

# cache.manifest нужно обновлять для FF 3.6
ExpiresByType text/cache-manifest «access plus 0 seconds»
# Запросы
ExpiresByType text/html «access plus 0 seconds»

# Выдача заголовка ETag (core feature)
FileETag MTime Size

JS:
//-------------- Функция предварительной загрузки изображений ----------------//
function PreLoad(image) {
if (!(image in preload)) {
preload[image] = new Image();
preload[image].src = 'images/'+image;
}
}
//----------------------------------------------------------------------------//
setTimeout('PreLoad("chat.jpg");', 30000);

Comments

[Wott]

статика апачем? плохой совет
лучше минимально проксировать nginx-ом а там есть замечательный expires max

[Виталий Желтяков]

Понятно дело, что nginx-ом статику кэшировать лучше. Но пускай автор с этим вариантом сначала разберётся.

Answer 2

[Wott]

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

Answer 3

[Алексей Сундуков]

Браузер сам их загрузит. Работать будет во всех современных.

Comments

[Алексей Лебедев]

Т.е. написав на JS
$("#load_list").append('
Все картинки из CSS файла попадут в кеш?

[Алексей Лебедев]

$("#load_list").append('<_img src="/common.css" onLoad="L();">');
Без _

Answer 4

[slang]

Нужно грузить цсс и все картинки отдельно джаваскриптом. Это называется прелоадинг картинок, используется, чтобы при появлении элемента, зависимого от стиля в ДОМ, не инициализировать загрузку картинки из этого стиля, а брать из кеша (задержка заметна визуально и не очень приятна). Т.е. грубо говоря, если загрузить стили, которые содержат внешние ресурсы, то эти ресурсы не будут загружены (и закешированы), до появления их в ДОМ.

Comments

[Алексей Лебедев]

Все понятно, кроме одного:
<_script type="text/javascript"> document.write('<link href="css/main.css?rnd=' + Math.round(Math.random() * 100000) + '" rel="stylesheet" type="text/css" \/>');</_script>
Это перезагружает все картинки, даже если они были в кеше.

Что можно почитать на тему прелоадинга картинок?

[Stalker_RED]

Там всё довольно просто, вот первая попавшаяся статья

Answer 5

[slang]

Этот код не перегружает никакие картинки, он только не даёт браузеру нормально кешировать стили, перегружая каждый раз из сервера. В следствии чего, если в ДОМе уже присутствуют элементы, то браузер сделает запрос к серверу, и получив 304 Not Modified, покажет ресурс из кеша, иначе, получив 200 Ок, покажет новую картинку. Или сделает это когда элементы появятся в ДОМе (если их раньше небыло).

Это как всё должно работать, если работает не совсем так — нужно смотреть конфигурацию сервера и заголовки. О прелоаде можно загуглить, ну вот например — perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/

Comments

[slang]

прошу прощения, это был ответ к предыдущему тексту