Перезапустите GIF, не перезагружая его в IE11

Question

Я пытаюсь перезапустить GIF-файл, когда пользователь нажимает на него, без необходимости перезагружать его (мой GIF-файл слишком тяжел для этого, я фактически предварительно загружаю его для своего приложения). Мой текущий код прекрасно работает в Chrome и во всех «современных браузерах», но мне нужно, чтобы он работал и в IE11 , и вот тут начинается борьба.

Вот пример кода , который отлично работает на Chrome, но не на IE11:

function activate_gif(){
    document.getElementById("img1").src = "https://i.imgur.com/Rsc0qOw.gif";
}

.myDiv{
  width: 500px;
  height: 300px;
}

.myDiv img{
  width: 100%;
  height: 100%;
}

<button onclick="activate_gif()">
  Click me
</button>
<div class="myDiv">
  <img id="img1" src="https://i.imgur.com/Rsc0qOw.gif">
</div>

Вы также можете найти его на jsFiddle: https://jsfiddle.net/c6hodyh2/3/

Вы можете найти другой (не) рабочий пример проблемы (идеально подходит для Chrome, не работает с IE): https://codepen.io/InSightGraphics/pen/CAlci

Что я пробовал до сих пор

Попытка 1

С этого SO вопроса я попробовал следующий код JS, чтобы "принудительно" обновить кэш:

function activate_gif(){
    document.getElementById("img1").src = "";
    document.getElementById("img1").src = "https://i.imgur.com/Rsc0qOw.gif";
}

Результат: Безуспешно, он абсолютно не отличался от моего исходного кода.

Попытка 2

Начиная с этой статьи я пытался обновить содержимое innerHTML:

function activate_gif(){
    document.getElementById("img1").style.display = '';
    document.getElementById("img1").innerHTML = document.getElementById("img1").innerHTML;
}

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

Попытка 3

Из этого SO вопроса я пытался использовать упрощенную версию решения, в основном, заставляя изображение загружаться снова, добавляя случайный суффикс к исходному URL:

function activate_gif(){
    document.getElementById('myImg').src = 'mysrc.gif?' + Math.random();
}

Результат: Это перезагружает GIF, который самостоятельно решает проблему с кешем. Однако GIF-файлы, которые я использую в своем реальном приложении, слишком тяжелые, поэтому, если изображение необходимо загружать каждый раз, когда пользователь нажимает кнопку, это приводит к ухудшению работы пользователя, особенно для пользователей с более низкой пропускной способностью.

Попытка 4

Исходя из ответа @ IStepashka, я попытался сначала установить (случайное и найденное в Интернете) пустое изображение перед установкой моего исходного источника:

function activate_gif(){
    document.getElementById("img1").src = "https://i.ytimg.com/vi/f3cLOucMpD0/maxresdefault.jpg";
    document.getElementById("img1").src = "https://i.imgur.com/Rsc0qOw.gif";
}

Результат: То же, что и попытка 1 , ничего не изменилось. Мой код все еще работает на Chrome, но не на IE.

Answer 1

Кажется, что IE 11 на самом деле не будет воспроизводить (не зацикливаясь) GIF, если он имеет его в кеше, и все экземпляры GIF того же SRC на самом деле синхронизированы ... Это похоже на еще один из IE ... Erm назовем их причудами .

Вот (грустный) обходной путь. Он перезагружает GIF, но, по крайней мере, он предварительно перезагружает его в фоновом режиме, чтобы не иметь слишком большого влияния на пользователя XP. Я изменил ваш gif на 2MO + один, чтобы показать загрузку фона.

Обратите внимание, что это следует использовать только в IE, поскольку другие браузеры хорошо работают с простым решением.

var oldNode = document.getElementById("img1"),
    src = oldNode.src + "?bust=",
    nextNode = oldNode.cloneNode(),
    parent = oldNode.parentNode;
nextNode.src = src + new Date().getTime();
function activate_gifIE(){
  oldNode.removeNode();
  parent.appendChild(nextNode);
  oldNode = nextNode;
  nextNode = oldNode.cloneNode();
  
  nextNode.src = src + new Date().getTime();
}

.myDiv{
  width: 500px;
  height: 300px;
}

.myDiv img{
  width: 100%;
  height: 100%;
}

<button onclick="activate_gifIE()">
  Click me
</button>
<div class="myDiv">
  <img id="img1" src="https://media.giphy.com/media/LRVnPYqM8DLag/giphy.gif" height="200px">
</div>

Я видел обходные пути, такие как этот и этот , но они включают циклические гифки и наложение неподвижного кадра перед ними или замену им им. Также в IE 11 вам придется согласиться на то, что пользователь приземлится в произвольное время в GIF, потому что вы не можете заставить его воспроизводить ...

В любом случае, надеюсь, это поможет.

Answer 2

Возможно, более уместно преобразовать GIF-файл в видео и использовать HTML-тег <video>. См. Замена анимированных GIF-файлов на видео Джереми Вагнера. Но если вы хотите придерживаться GIF, вы можете использовать XMLHttpRequest, Blob и URL объекта, учитывая CORS и HTTP-заголовки, связанные с кэшем, соответственно настроены:

function activate_gif(){
    var url = "https://i.imgur.com/Rsc0qOw.gif";
    var img = document.getElementById( "img1" );

    var xhr = new XMLHttpRequest();
    // Browser will take cached response if it has cache entry with url key.
    xhr.open( "GET", url );
    xhr.responseType = "blob";
    xhr.onload = function() {
        if ( xhr.status != 200 ) {
            // Complain.
            return;
        }
        var blobUrl = URL.createObjectURL( xhr.response );
        img.src = blobUrl;
        setTimeout( function () {
            // Let browser display blob and revoke blob after stack unwind.
            URL.revokeObjectURL( blobUrl );
        }, 0 ); // You might need to increase delay time for large images.
    };
    xhr.send();
}

.myDiv{
  width: 500px;
  height: 300px;
}

.myDiv img{
  width: 100%;
  height: 100%;
}

<button onclick="activate_gif()">
  Click me
</button>
<div class="myDiv">
  <img id="img1" src="https://i.imgur.com/Rsc0qOw.gif">
</div>

Вы также можете использовать обнаружение браузера, чтобы использовать более эффективный и простой код в других пользовательских агентах.

Для получения дополнительной информации проверьте:

• XMLHttpRequest.responseType страница в MDN
• URL.createObjectURL () страница в MDN
• Обмен ресурсами между источниками (CORS) Страница в MDN
• HTTP-кеширование статья Ильи Григорика.
• Элементы управления HTML5-видео javascript - перезапустите видео обсуждение StackOverflow

Answer 3

Попробуйте сначала установить любое пустое изображение в качестве источника и вернуть исходное исходное изображение. вот так:

function activate_gif(){
    document.getElementById("img1").src = "images/blank.jpg"     
    document.getElementById("img1").src = "https://i.imgur.com/Rsc0qOw.gif";

}