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




stop gif animation css (2)

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

Вот мой текущий код. img и nextimg - это теги <div> содержащие по одному nextimg <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-файлы, кажется, перезагружаются при каждом их отображении.

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


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

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

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

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

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


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

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

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

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

Это будет играть с начала GIF.

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





animated-gif