Vytvářím prezentaci animací pomocí animovaných GIFů. Procházím z jedné animace do druhé. Problém je:jediný způsob, jak jsem zjistil, jak zajistit, aby se GIF začal animovat od prvního snímku, je znovu jej načíst pokaždé, když se zobrazí. Každý GIF má přibližně 200 kB, což je příliš velká šířka pásma pro nepřetržitou prezentaci.
Zde je můj aktuální kód. img a nextimg jsou <div> značky obsahující jeden <img> každý. nextimg_img je <img> tag odpovídající dalšímu obrázku, který se má zobrazit.
var tmp = nextimg_img.attr('src');
nextimg_img.attr('src', '');
setTimeout(function() { nextimg_img.attr('src', tmp); }, 0);
img.fadeOut('slow');
nextimg.fadeIn('slow');
Myšlenka je taková, že nastavuje src atribut dalšího obrázku do '' a poté jej nastaví zpět na zdroj GIF, který se má zobrazit.
Funguje to – animace se restartuje od začátku – ale zdá se, že GIFy jsou znovu staženy pokaždé, když se zobrazí.
EDIT:je to opakující se prezentace a já se snažím vyhnout opětovnému načítání GIFů ze sítě, když se zobrazí podruhé/potřetí/po sobě.
Odpověď
Své obrázky byste měli předem načíst do kódu.
var image = new Image(); image.src = "path";
když chcete použít:
nextimg_img.attr('src', image.src);
Poté, když vyměníte src, jednoduše vyměňte z předinstalovaných obrazových objektů. To by mělo stačit, abyste se vyhnuli opětovnému stahování.