Я создаю слайд-шоу с анимированным 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 от сети, когда их показывают во второй/третий/последующий раз.
Вы должны предварительно загружать изображения в код.
var image = new Image();
image.src = "path";
когда вы хотите использовать:
nextimg_img.attr('src', image.src);
Затем, когда вы меняете src, просто поменяйте местами объекты предварительно загруженных изображений. Это поможет избежать повторной загрузки.