Перезапустить анимированный GIF из JavaScript без перезагрузки изображения

Я создаю слайд-шоу анимаций с использованием анимированных GIF файлов. Я перекрестно от одной анимации к другой. Проблема заключается в следующем: единственный способ, которым я обнаружил, чтобы GIF начал анимацию из первого кадра, - это перезагружать его каждый раз, когда он отображается. GIF файлы составляют 200 КБ или около того, что является слишком большой пропускной способностью для непрерывного слайд-шоу.

Вот мой текущий код. img и nextimg являются тегами <div>, содержащими один <img> каждый. nextimg_img - это тег <img>, соответствующий следующему отображаемому изображению.

var tmp = nextimg_img.attr('src');
nextimg_img.attr('src', '');
setTimeout(function() { nextimg_img.attr('src', tmp); }, 0);
img.fadeOut('slow');
nextimg.fadeIn('slow');

Идея состоит в том, что она устанавливает атрибут src следующего изображения в '', а затем возвращает его к источнику отображаемого GIF.

Это работает — он перезапускает анимацию с самого начала — но GIF, кажется, перезагружаются каждый раз, когда они отображаются.

EDIT: это циклическое слайд-шоу, и я стараюсь не перезагружать GIF из сети, когда они показывают второе/третье/последующее время.

Ответ 1

Вы должны предварительно загрузить изображения в код.

var image = new Image();
image.src = "path";

если вы хотите использовать:

nextimg_img.attr('src', image.src);

Затем, когда вы меняете src, просто меняйте его с предварительно загруженных объектов изображения. Это должно сделать трюк, чтобы избежать повторной загрузки.

Ответ 2

// reset a gif in javascript
img.src = "your_image_url.gif"+"?a="+Math.random();

Тада!

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

Ответ 3

Я просто решил. Поместите этот код (или другое статическое изображение, если хотите) на странице:

<img src="data:image/gif;base64,">

Затем замените его следующим кодом, когда вы будете готовы его воспроизвести:

<img src="data:image/gif;base64,R0lGODl...AH0AvI">

Он будет воспроизводиться с начала gif.

Единственная проблема заключается в том, что вы не можете использовать URL-адрес gif, а только его base64.