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

Я создаю слайд-шоу с анимированным GIFs использования анимаций. Я выгораю от одной анимации до следующего. Проблема: единственным путем я обнаружил, чтобы гарантировать, что GIF начинает анимировать от первого кадра, должен перезагрузить его каждый раз, когда его показывают. GIFs составляют приблизительно 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, который будет отображен.

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

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

20
задан nornagon 7 July 2010 в 04:43
поделиться

1 ответ

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

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

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

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

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

28
ответ дан 30 November 2019 в 00:39
поделиться
Другие вопросы по тегам:

Похожие вопросы: