2012-10-12 18 views
5

Ich habe eine Seite mit 7 gif-Dateien darauf.Gibt es eine Möglichkeit, Gif-Dateien zu synchronisieren?

Gibt es eine Möglichkeit, sie alle zu synchronisieren, so dass sie beginnen zur gleichen Zeit zu spielen?

Ich dachte, sie von Vorbelastung, aber immer noch können sie nicht synchronisiert beginnen, wenn man länger als ein anderes zu laden dauert.

+5

Sie haben keine Kontrolle über das Starten von GIF-Dateien mit Javascript (oder Javascript-Bibliotheken). Das Beste, was Sie tun können, ist, sie vorher zu laden und dann den src für alle gleichzeitig zu setzen, sobald alle geladen sind. Das würde sie alle neu starten. – Archer

+0

Ich dachte, das wäre die Antwort Archer. Was meinst du mit "reset the src"? – williamsongibson

+0

Es gibt 2 Möglichkeiten zu gehen. Entweder haben Sie die Bilder auf der Seite und lassen Sie sie alle laden, oder lassen Sie die Bilder auf der Seite verborgen und laden Sie sie in den Speicher, indem Sie Bildobjekte benutzen, die rein im Skript sind. Sobald sie alle geladen sind, legen Sie einfach die Quelle für jedes Bild auf der Seite fest. Mit dem Zurücksetzen der src wollte ich einfach das src-Attribut auf das setzen, was es bereits ist: $ ("img"). Je (function() {$ (this) [0] .src = $ (this) [0]. src;}); ' – Archer

Antwort

10

Wie @Archer oben erwähnt hat, ist es eine Möglichkeit, sie vorher zu laden und dann den src zurückzusetzen. jquery verwendet, könnte man so etwas tun:

$(window).load(function() { 
    $('.preload').attr('src', function(i,a){ 
     $(this).attr('src','').removeClass('preload').attr('src',a); 
    }); 
}); 

es Siehe auf jsfiddle.

-2

Versuchen Sie, sie alle im Kopf der Seite zu laden und sie auszuführen, wenn der Körper lädt. Machen Sie eine Funktion, function gifs{} vielleicht, und führen Sie es wie folgt aus: <body onload="gifs()">.

1

Betrachten Sie Ihre Gifs mit png-Sequenzen (Sprite Blätter) oder sogar jpg-Sequenzen ersetzt, je nach Art des Inhalts.

erstellen div die Animation Größe gewünscht, stellen Sie Sprite-Blatt als Hintergrundbild mit Überlauf versteckt.

einen Timer in Javascript erstellen, die alle Animationen aktualisiert (Hintergrundbildpositionen) in der gleichen Zeit mit jedem Tick so dass Sie sehr genau die Framerate steuern.

ich diese Technik bereits zuvor verwendet habe und es funktioniert gut, wenn Ihre Sprite Blätter zu viel nicht zu beeinträchtigen die Ladezeiten.

Verwandte Themen