Gif сбросить кеширование без жесткого обновления

Question

Мне нужно разместить отдельные картинки в нескольких разделах вкладок. Поскольку я нажимаю на вкладки, которые показывают каждый gif и вкладки из другого, мне требуется Javascript для сброса gif в обработчике событий. Скрипт для этого раздела работает нормально. Я написал функцию resetGif, чтобы соответствовать этому. Это также работает по большей части. Проблема, которую я нахожу с этим конкретным сценарием, заключается в том, что сброс в какой-то момент кэшируется. Если я выполняю жесткое обновление в браузере, скрипт resetGif работает правильно. Если я выполняю регулярное обновление, скрипт resetGif запускается только один раз.

Я не слишком опытен с Javascript, поэтому я не был уверен, что делать дальше.

// Function resets gif through id

function resetGif(id) {
    var img = document.getElementById(id);
    var imageUrl = img.src;
    img.src = "";
    img.src = imageUrl;
}

Мне нужна функция resetGif, чтобы запускать / сбрасывать gif каждый раз, когда он вызывается, независимо от того, было ли у меня полное обновление или обычное обновление. Мне это нужно, чтобы не кешировать.

Answer 1

Если вы хотите принудительно перезагрузить изображение, добавьте метку времени к src, чтобы оно было уникальным, например:

function resetGif(id) {
  var img = document.getElementById(id);
  var imageUrl = img.src;
  img.src = '';
  img.src = imageUrl.split('?')[0] + '?' + new Date().getTime();
}

Обратите внимание, что теоретически настройка линии src = ''не нужно, если только в браузере нет странного поведения, о котором я не знаю.

Answer 2

function resetGif(id) {
  var img = document.getElementById(id);
  var randomString = Math.random().toString().split(".")[1];
  var imageUrl = img.src;
  img.src = ''; // will remove image source 
  img.src = imageUrl.split('?')[0] + '?' + randomString;
}

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