swanrnd
@swanrnd
Издатель HTML5 игр

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

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


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


И вопрос: В каких браузерах будет это работать?
  • Вопрос задан
  • 3319 просмотров
Решения вопроса 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);
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
Wott
@Wott
что бы картинки попали в кэш надо
— иметь для них постоянный полный урл
— выставлять соответствующие параметры в заголовке
а как именно они попадают на страницу не важно
Ответ написан
Комментировать
alekciy
@alekciy
Вёбных дел мастер
Браузер сам их загрузит. Работать будет во всех современных.
Ответ написан
slang
@slang
Нужно грузить цсс и все картинки отдельно джаваскриптом. Это называется прелоадинг картинок, используется, чтобы при появлении элемента, зависимого от стиля в ДОМ, не инициализировать загрузку картинки из этого стиля, а брать из кеша (задержка заметна визуально и не очень приятна). Т.е. грубо говоря, если загрузить стили, которые содержат внешние ресурсы, то эти ресурсы не будут загружены (и закешированы), до появления их в ДОМ.
Ответ написан
slang
@slang
Этот код не перегружает никакие картинки, он только не даёт браузеру нормально кешировать стили, перегружая каждый раз из сервера. В следствии чего, если в ДОМе уже присутствуют элементы, то браузер сделает запрос к серверу, и получив 304 Not Modified, покажет ресурс из кеша, иначе, получив 200 Ок, покажет новую картинку. Или сделает это когда элементы появятся в ДОМе (если их раньше небыло).

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы