Animierte GIFs vorladen und wechseln

Computer: Software & Programmierung HTML & CSS
#1

Hallo miteinander,

ich habe eine Reihe von animierten GIFs, die nacheinander an derselben Stelle der Webseite erscheinen sollen - die Animation stellt den Wechsel zum nächsten GIF dar. Klick-Ereignisse sollen den Wechsel auslösen. Also:

A.jpg → A-zu-B.gif (kein Loop, letztes Animationsbild bleibt) → B-zu-C.gif (dto.) → C-zu-D.gif → etc. …

Wie kann ich erreichen (evtl. mit jQuery), daß die GIFs schon vorgeladen sind (damit sie bei Aufruf sofort erscheinen), aber eben erst mit dem Klick-Ereignis mit ihrer Animation starten?

Vielen Dank und schöne Grüße
JayKay

#2

Hallo,

mit JavaScript lassen sich Bilder sehr einfach vorladen – indem man einfach ein Bildobjekt erstellt. Hier ist ein einfaches Beispiel:

bild1 = new Image();
bild.src = „bild.gif“;

Bei sehr großen Bildgrößen bietet es sich an bei den Bildobjekten mit dem onLoad Event Handler abzufragen, wann die Bilder geladen sind. Man könnte z. B. eine Variable hochzählen und erst wenn alle x Bilder geladen sind die klickbare Animation anbieten. Es gibt aber auch zahlreiche Beispiele Im Netz (mit und ohne JQuery Plugins), welche komfortables Vorladen ermöglichen, einen Ladebalken einblenden o. ä.

Das erste Standbild würde ich auch als solches erstellen und bei Klick durch das erste animierte GIF (ohne Loop) tauschen. Beim Klick auf dieses würde dann das nächste animierte GIF eingesetzt werden usw.
Eine Abfrage, ob die GIF Animation schon beendet ist, ist meines Wissens leider nicht möglich.

Gruß

#3

Lösung: Bilder als Objekt erstellen
Hallo Netscape47Feind,

super Vorschlag! Vielen Dank. So mach ich’s. Die Animation-Fertig-Abfrage brauche ich akut nicht.

Danke (und Sternchen).
JK