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

Question

Я создаю слайд-шоу анимаций с использованием анимированных 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 для отображения.

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

РЕДАКТИРОВАТЬ: это циклическое слайд-шоу, и я стараюсь не перезагружать GIF-файлы из сети, когда их показывают во второй / третий / последующий раз.

Answer 1

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

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

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

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

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

Answer 2

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

Тада!

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

Answer 3

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

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

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

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

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

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