Перезагрузка анимированного .gif в проводнике не работает с img.src = ""

Question

Im работает цикл различных последовательностей анимации, и в какой-то момент я хочу добавить анимацию GIF. Добавление GIF в div отлично работает в первый раз, однако в моем втором цикле я, похоже, не могу «перезагрузить» GIF для работы в Explorer.

function toggleGifAnimation() { 
    if(loopCount == 1) { //in my first loop I create the img and append it to the HTML 
     imgContainer = document.createElement("img"); 
     imgUrl = "assets/myGIFanimation.gif"; 
     imgContainer.src = imgUrl; 

     myDiv.appendChild(imgContainer); 
     myDiv.style.display = "block"; 
    } else { //each other loop I try to re-use and "reload" 
     //THIS DOESNT SEEM TO WORK IN EXPLORER 
     imgContainer.src = ""; 
     imgContainer.src = imgUrl; 
    } 
} 

Это, кажется, работает в Firefox + Chrome.

EDIT 1: Я нашел предложения по добавлению случайного числа в конце src, однако это приведет к повторной загрузке всего размера файла. И, увидев, что эта анимация gif довольно много mbs, тогда это не сработает :(

Answer 1

Как насчет перезагрузки gif, но предварительно загрузите его в следующий раз, когда хотите его показать? Тогда вам не придется ждать при перезагрузке ... но вы по-прежнему будете уничтожать полосу пропускания, если у вас есть большие изображения и часто их перезагружать, может быть плохо, особенно на мобильных устройствах.

Возможно, вы должны использовать этот скрипт только для IE. на IE11 я запускаю на своей виртуальной машине, я не могу проверить еще много.

В принципе, у вас есть объекты изображения, для URL которых вы добавляете случайные и/или возрастающие значения, чтобы t o принудительная перезагрузка. Когда вы переключаете, вы заменяете элемент, который находится в div, с другим. Затем вы заменяете удаленный элемент, предварительно загружая изображение новой копией того же изображения, но с другим рандомизированным URL-адресом.

Вот типичный фрагмент кода со случайным gif в Интернете, который воспроизводится только один раз. Нажатие «переключение» перезапускает gif даже в IE.

var imgUrl = "http://i.imgur.com/oZqny.gif" 
 
var myDiv = document.getElementById("zou"); 
 
myDiv.style.display = "block"; 
 
var loopCount = 1; 
 

 
// against caching : load= between page loads, loop= between clicks on "toggle" 
 
imgUrl += "?load=" + new Date().getTime() + "&loop="; 
 
var imgs = [new Image(), new Image()]; 
 
imgs[0].src = imgUrl + (loopCount - 1); 
 
imgs[1].src = imgUrl + loopCount; 
 

 
function toggleGifAnimation() { 
 
    if (loopCount == 1) { 
 
    myDiv.appendChild(imgs[loopCount % 2]); 
 
    } else { 
 
    myDiv.replaceChild(imgs[loopCount % 2], imgs[(loopCount + 1) % 2]); 
 
    } 
 
    loopCount++; 
 
    imgs[loopCount % 2] = new Image(); 
 
    imgs[loopCount % 2].src = imgUrl + loopCount; 
 
} 
 

 
document.getElementById("zde").onclick = toggleGifAnimation;

<button id="zde">toggle !</button> 
 
<div id="zou"> 
 
</div>

Answer 2

... 
tmpImgUrl = tmpImgUrl + "?random=" + Math.random().toString(); 
imgContainer.src = tmpImgUrl; 
... 

Скрипт запрашивает сервер, чтобы доставить изображение с URL http://... /assets/myGIFanimation.gif?random=0.37928739409283748