Wie man animierte GIFs onClick spielt

Animated GIF ist eine beliebte Methode, um ein Design-Konzept zu visualisieren (ein Beispiel, wie wir es für die mit CSS erstellten Posttexteffekte gemacht haben) oder einen kurzen Videoclip zeigen. Wenn sich jedoch zu viele auf derselben Seite befinden, wird der Fokus des Benutzers davon abweichen. Für Seiten mit vielen GIFs sind dies schlechte Nachrichten.

Die Lösung: Benutzer mit einem statischen Bild bedienen und nur zulassen, dass die animierte GIF durch Klicken des Benutzers ausgeführt wird. In diesem kurzen Tutorial zeigen wir Ihnen, wie Sie genau das tun.

• Demo anzeigen
• Quelle herunterladen

Fertig machen

Beginnen Sie mit der Vorbereitung der Projektordner und Dateien, die Folgendes umfassen: eine HTML-Datei, die jQuery und zuletzt eine JavaScript-Datei, in die wir unseren Code schreiben. Sie können jQuery mit einem CDN verknüpfen oder die Kopie abholen und mit Ihrem Projektverzeichnis verknüpfen. Die Styles und CSS würde ich Ihrer Fantasie überlassen. Der wesentlichste Teil ist das HTML-Markup wie folgt:

Beachten Sie die zusätzlichen Daten-Alt Attribut in der img Element. Hier speichern wir das GIF anstelle des statischen Bildes, das wir anfangs bedienen. Sie können weitere Bilder und auch eine Beschriftung für jedes Bild hinzufügen figcaption Element.

Danach schreiben wir das JavaScript, das die Magie bringt. Die Idee ist, das GIF-Bild bereitzustellen, wenn der Benutzer auf das Bild klickt.

Das JavaScript

Zuerst erstellen wir eine Funktion, die den GIF-Bildpfad abruft, den wir in den Pfad eingefügt haben Daten-Alt Attribut. Wir werden jedes Bild durchlaufen und die jQuery verwenden .Daten() Methode dazu:

 var getGif = function () var gif = []; $ ('img'). each (function () var data = $ (this) .data ('alt'); gif.push (data);); gif zurückgeben;  var gif = getGif ();

Wir führen die Funktion aus und speichern die Ausgabe in einer Variablen gif, wie oben. Das gif Variable enthält jetzt den Pfad der GIF aus den Bildern auf der Seite.

Image vorladen

Wir haben jetzt ein Ladeproblem: Wenn die GIF noch nicht geladen ist, besteht die Möglichkeit, dass die animierte GIF nicht sofort abgespielt wird (da der Browser einige Sekunden benötigt, um die GIF vollständig zu laden). Diese Verzögerung würde bei einer großen GIF-Bildgröße deutlicher spürbar sein.

Wir müssen die GIFs gleichzeitig laden oder laden, während die Seite geladen wird.

 // Laden Sie alle GIFs neu. var image = []; $ .each (gif, function (index) image [index] = neues Bild (); image [index] .src = gif [index];);

Öffnen Sie nun die DevTools und gehen Sie dann zum Netzwerk (oder Ressourcen) Registerkarte. Sie werden feststellen, dass die GIFs bereits geladen sind, obwohl sie im gespeichert sind Daten-Alt Attribut. Und das Folgende ist der Code, den Sie dazu benötigen.

Der letzte Teil des Codes ist, wo wir jeden binden Zahl Element, das das Bild mit der klicken Veranstaltung.

Der Code tauscht die Bildquelle zwischen src Attribut, wo das statische Image geliefert wird und das Daten-Alt Attribut, wo das GIF-Image anfänglich geliefert wird.

Der Code wird auch auf das statische Bild zurückgesetzt, wenn der Benutzer ein zweites Mal klickt, “aufhören” die Animation.

 $ ('figure'). on ('click', function () var $ this = $ (this), $ index = $ this.index (), $ img = $ this.children ('img'), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.'); if ($ imgExt [1] === 'gif') $ img.attr ('src', $ img.data ('alt')). attr ('data-alt', $ imgSrc); else $ img.attr ('src', $ imgAlt) .attr ('data-alt', $ img.data ('alt'));;

Und das ist es. Sie können die Seite mit Stilen polieren. Sie können beispielsweise eine Wiedergabeschaltfläche über dem Bild hinzufügen, um anzuzeigen, dass dies der Fall ist “spielbar” oder ein animiertes GIF.

Schauen Sie sich die Demo an und laden Sie die Quelle hier herunter.

• Demo anzeigen
• Quelle herunterladen