Обновление картинки по одному URL без перезагрузки страницы
Быстрый ответ
Чтобы принудительно обновить изображение, добавьте к его URL метку времени. Вот пример кода, который сделает это немедленно:
// Забудем про устаревшие шутки 😊
document.getElementById('идентификаторИзображения').src += '?' + new Date().getTime();
Замените 'идентификаторИзображения'
на идентификатор изображения, которое вы хотите обновить, и готово: вы увидите самую последнюю версию этого изображения.
Борьба с кэшированием: добавление временной метки к URL
Для того чтобы файл не кэшировался, к его URL можно добавить метку времени или случайное число. Этот метод, называющийся "обход кэша", принуждает браузер загружать файл с сервера, воспринимая изменённый URL как новый ресурс.
// Если информация новая для меня, значит, она новая и для браузера
var imageSrc = "image.jpg?" + Math.random();
Управление кэшированием при помощи заголовка Cache-Control
При помощи заголовка Cache-Control
можно регулировать кэширование в браузере:
- Чтобы браузер принудительно проверял актуальность содержимого, используйте
Cache-Control: max-age=0, must-revalidate
. - Если же речь идёт о таких браузерах, как Safari и Chrome, которые устойчивы к типичным методам управления кэшем, можно использовать
Cache-Control: no-store
.
// "Прислушайся, браузер, мы объявляем войну кэшу"
Cache-Control: no-store
Тестирование совместимости
Совместимость с различными браузерами — это всегда задача, ведь не все из них одинаково интерпретируют заголовки кэширования. Проверьте, корректно ли работает ваша стратегия обхода кэша в разных браузерах, чтобы быть уверенным в её эффективности.
Нахождение баланса между актуальностью и эффективностью использования ресурсов
Для того чтобы находиться на грани между актуальностью изображений и оптимизацией ресурсов, используйте условное кэширование. С помощью таких заголовков как If-Modified-Since
и If-None-Match
можно сократить трафик в тех случаях, когда содержимое меняется редко.
Визуализация
Представьте ситуацию с газетным автоматом, который всегда предлагает самую свежую газету:
Старый подход (без обновления): 🗞️🕘 --(время идет)--> 🗞️🕘 (тот же старый выпуск)
Новый подход (с обновлением): 🗞️🕘 --(вышел новый выпуск)--> 🗞️🕞 (свежий номер!)
/* Метод обновления настолько простой, что поймёт даже ребёнок */
const imageUrl = 'image.jpg';
let uniqueId = new Date().getTime();
function refreshImage() {
document.getElementById('моеизображение').src = `${imageUrl}?${uniqueId}`;
// Обновляем метку времени, ведь в этом и заключается идея постоянного обновления
uniqueId = new Date().getTime();
}
Теперь газетный автомат всегда предлагает самую свежую газету:
Перед: 🗞️ (устаревший выпуск)
После: 🗞️✨ (самые свежие новости!)
Использование Fetch API
С использованием Fetch API и параметра cache: 'reload'
можно организовать запросы, которые игнорируют кэш браузера:
/* Как волшебным взмахом волшебной палочки, всё обновляется */
function reloadImg(url) {
fetch(url, { cache: 'reload' }).then(response => {
document.getElementById('идентификаторИзображения').src = url;
});
}
Работа с DOM-элементами
Для обновления изображений можно манипулировать DOM-элементами, динамически заменяя их без перезагрузки страницы:
let newImage = new Image();
newImage.onload = () => {
// Заменяем старое изображение новым
let oldImage = document.getElementById('идентификаторИзображения');
oldImage.parentNode.replaceChild(newImage, oldImage);
};
newImage.src = imageUrl + '?' + new Date().getTime();
Плановое обновление
Для регулярного обновления изображений можно использовать функцию setInterval
:
/* Все свежие мемы будут отображаться автоматически каждые 30 секунд */
setInterval(refreshImage, 30000);
Полезные материалы
- HTTP кэширование — HTTP | MDN — подробное руководство по кэшированию и методам обхода кэша.
- Стратегии инвалидации кэша CSS | CSS-Tricks — практические советы по обходу кэширования для CSS.
- javascript – Обновление изображения на новое по тому же URL – Stack Overflow — обсуждение этой темы в сообществе.
- Метод getTime() объекта Date в JavaScript — детальное описание метода
getTime()
, полезного для работы с проблемами кэширования данных. - RFC 7234 – Hypertext Transfer Protocol (HTTP/1.1): Кэширование — технические детали общих спецификаций кэширования в протоколе HTTP.
- Предотвращение лишних сетевых запросов с помощью HTTP кэша | web.dev — специализированные советы по оптимизации кэширования контента.