Застрял с изображениями / CSS кэшируется браузером - PullRequest
Новая
       2

Застрял с изображениями / CSS кэшируется браузером

0 голосов
/ 23 февраля 2012

На моей веб-странице присутствуют изображения, которые мы обновляем с бэкэнда. Но те изображения, которые не отражаются напрямую, означают, что пользователь должен сделать Ctrl + F5 Это означает, что браузер клиента кеширует эти изображения. Есть ли способ перезагрузить обновленные изображения, JS, CSS после их обновления?

То, что я пробовал со своей стороны. 

ETag

Что не сработало для меня.

Добавлены следующие теги в заголовок моей страницы 

<meta http-equiv="Expires" CONTENT="-1" ></meta>

<meta http-equiv="cache-control" content="no-cache"></meta>

<meta http-equiv="Pragma" CONTENT="no-cache"></meta>

Но тот же результат.

Добавлены следующие настройки в Apache 

ExpiresActive on
ExpiresByType application/javascript "access plus 0 seconds"
ExpiresByType image/jpg "access plus 0 seconds"
ExpiresByType image/jpeg "access plus 0 seconds"
ExpiresByType image/gif "access plus 0 seconds"
ExpiresByType image/png "access plus 0 seconds"
ExpiresByType text/css "access plus 0 seconds"

Вышеуказанные конфигурации работают для JS. Но столкнулся с проблемой с изображениями. Я не могу добавить номер токена или номер версии в конце имени URL / изображения, что потребовало слишком большого изменения кода и тестирования. Подскажите пожалуйста, есть ли другой централизованный способ ограничения изображений, css из кеширования

Заранее спасибо.

1 Ответ

1 голос
/ 23 февраля 2012

Вы можете использовать javascript, чтобы изменить src любого изображения, это приведет к изменению имени и перезагрузке браузера.

Пример: 

document.getElementById('myimg').src = document.getElementById('myimg').src + '?r=' + Math.random();

Не самое чистое решение, но, похоже, ваши возможности ограничены.

Чтобы перезагрузить изображения всех страниц с помощью jQuery, вы можете попробовать: 

$('img').each(function() {
    $(this).attr('src', $(this).attr('src') + '?r=' + Math.random())
});

Изменяя начальный селектор, вы можете ограничить его областью, чтобы не перезагружать все. Это не повлияет на изображения, указанные стилем CSS.

...