Обновление картинки по одному 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);

Полезные материалы

1. HTTP кэширование — HTTP | MDN — подробное руководство по кэшированию и методам обхода кэша.
2. Стратегии инвалидации кэша CSS | CSS-Tricks — практические советы по обходу кэширования для CSS.
3. javascript – Обновление изображения на новое по тому же URL – Stack Overflow — обсуждение этой темы в сообществе.
4. Метод getTime() объекта Date в JavaScript — детальное описание метода getTime(), полезного для работы с проблемами кэширования данных.
5. RFC 7234 – Hypertext Transfer Protocol (HTTP/1.1): Кэширование — технические детали общих спецификаций кэширования в протоколе HTTP.
6. Предотвращение лишних сетевых запросов с помощью HTTP кэша | web.dev — специализированные советы по оптимизации кэширования контента.