Loading Dots jQuery Plugin

Vor einiger Zeit hat mir ein Leser namens James Dimick jQuery-Code geschickt, an dem er arbeitete, um eine „Loading Dots“-Funktion zu erstellen. Sie kennen das klassische Designmuster, bei dem der Bildschirm (oder ein Bereich) „Loading…“ mit wachsenden Punkten anzeigt.

Lädt (Loading)
Loading.
Loading..
Loading…
Loading….

Ich habe mir seinen Code angesehen und gesagt: „Oh ja, das kann ich sicher effizienter machen.“ Dann habe ich das, was er hatte, genommen und es doppelt so lang gemacht =). Aber fairerweise habe ich es in ein Plugin verwandelt und es flexibler und vielseitiger gemacht.

Was es tut

Sie rufen es für ein beliebiges Element auf, so:

$("#randomArea").Loadingdotdotdot({
    "speed": 400,
    "maxDots": 4,
    "word": "Loading"
});

Es ersetzt den Inhalt dieses Elements vollständig durch den Text „Loading“ (mit den animierten Punkten). Die Geschwindigkeit gibt an, wie schnell der nächste Punkt platziert wird. maxDots gibt an, wie viele Punkte es maximal werden, bevor es von vorne beginnt.

Das Plugin stellt sicher, dass „Loading…“ horizontal und vertikal exakt in der Mitte des Elements zentriert ist, in dem es aufgerufen wird.

Wofür ist es gut?

Am wahrscheinlichsten würden Sie es in einem Element kurz vor einem AJAX-Aufruf verwenden. Dies gibt den Benutzern einen Hinweis darauf, dass mit diesem Bereich etwas passiert. Vermutlich wird nach Erfolg (oder Fehler) dieses AJAX-Aufrufs der Inhalt des Bereichs erneut ersetzt (wodurch das „Loading…“ ersetzt wird).

Demo und Download

Sehen Sie sich die Demo-Seite an, bevor Sie herunterladen/verwenden. Dort gibt es eine „Cleanup“-Funktion, die in jeder Live-Umgebung verwendet werden sollte. Es gibt eine `setInterval()`-Funktion, die im Plugin aufgerufen wird, und nach einem erfolgreichen AJAX-Aufruf sollte dieses Intervall gestoppt werden, um zu verhindern, dass der Browser es auf einem Element ausführt, das nicht mehr existiert.

Demo ansehen   Dateien herunterladen

Lehrreiche Lektion

Ich habe dieses Plugin mit der Methode erstellt, die ich irgendwie für die Doug Neiner Methode halte. Daher sind alle Funktionen, Variablen und Parameter innerhalb des „Kerns“ des Plugins enthalten. Eine weitere Sache, die ich von Doug gelernt habe, ist, wie ein Plugin verschiedene Dinge tun kann, je nachdem, welche Parameter man übergibt. Sie haben oben die Standardverwendung gesehen, bei der Sie ihm Geschwindigkeit und maxDots als Objekt übergeben. Die Bereinigungsfunktion, die es tut, wird jedoch durch Übergabe eines Strings an das Plugin durchgeführt, wie z.

$("#randomArea").Loadingdotdotdot("Stop");

Dies geschieht durch Testen destypeofParameters, bevor etwas unternommen wird.

$.fn.Loadingdotdotdot = function(options) {
        if (typeof(options) == "string") {
            // do something
        } else { 
            // do a different (default) thing
        } 
};

Verwendung von CSS3-Animationen

James Dimick experimentierte auch mit CSS3-Animationen und entwickelte einige alternative Techniken für diese Ladeanzeige mit Punkten. Eine davon besteht darin, die Punkte in Spans zu verpacken und dann Keyframe-Animationen zu verwenden, um ihre Deckkraft unendlich, aber versetzt voneinander zu wiederholen.

<p id="loading">Loading<span>.</span><span>.</span><span>.</span></p>

@-webkit-keyframes opacity {
	0% { opacity: 1; }
	100% { opacity: 0; }
}
@-moz-keyframes opacity {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

#loading {
	text-align: center; 
	margin: 100px 0 0 0;
}

#loading span {
	-webkit-animation-name: opacity;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	
	-moz-animation-name: opacity;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: infinite;
}

#loading span:nth-child(2) {
	-webkit-animation-delay: 100ms;
	-moz-animation-delay: 100ms;
}

#loading span:nth-child(3) {
	-webkit-animation-delay: 300ms;
	-moz-animation-delay: 300ms;
}

Beachten Sie die Vendor-Präfixe und die aktuelle Browserunterstützung.

Animation Demo #1

Seine nächste Idee war die Verwendung eines Kreis aus Punkten, der sich dreht, ähnlich wie diese lustigen kleinen AJAX-Lade-Grafiken, nur eben mit CSS3-Animationen.

Animation Demo #2

Aktualisierungen

1/25/2012:

Plugin aktualisiert, um den „word“-Parameter aufzunehmen, damit Sie den Text einfach ändern können. Danke Harris Novick.

Hier ist eine weitere CSS-Animationstechnik, bei der die Punktgruppe zusammen liegt (anstatt in separaten Spans) und durch Animation der Breite ihres übergeordneten Elements mit überlaufendem Inhalt ausgeblendet wird.

Diese Spinner sind ebenfalls bemerkenswert, da sie zur gleichen grundlegenden Designmustergruppe gehören.