QueryLoader v2
QueryLoader v2 ist eine bessere Version des alten Skripts aus dem Jahr 2009. Es dient hauptsächlich dazu, die Bilder auf Ihrer Website vorab zu laden, indem es ein Overlay und eine Ladebalken anzeigt. Es holt automatisch alle Ihre Bilder und Hintergrundbilder und lädt sie vor, bevor es die Webseite anzeigt.
QueryLoader funktioniert derzeit mit jQuery v1.9 und in IE-Version > 7, Chrome, Safari und Firefox.
Den vollständigen Beitrag findest du hier: http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/
Wie man es benutzt
Fügen Sie das Skript in den Kopfbereich Ihrer Webseite ein.
<script src="path/to/file/jquery.queryloader2.js" type="text/javascript"></script>
Stellen Sie sicher, dass Sie es hinzufügen, nachdem Sie jQuery aufgenommen haben.
Rufen Sie nun QueryLoader in einer $(document).ready() wie dieser auf:
$(document).ready(function () {) {
$("body").queryLoader2();
});
Für den Support auf iOS-Geräten verwenden Sie den folgenden Code:
window.addEventListener('DOMContentLoaded', function() {) {
$("body").queryLoader2();
});
Installation mit Bower
bower install queryloader2
Dank an
BilderLoaded by desandro - https://github.com/desandro/imagesloaded
Grundlegende Anwendung
$(selector).queryLoader2(options);
Optionen
hintergrundFarbe
(string) Hintergrundfarbe des Laders (in hex).
Standard: "#000".
barFarbe
(string) Hintergrundfarbe des Balkens (in hexadezimaler Darstellung).
Standard: "#FFF".
barHöhe
(int) Höhe des Balkens in Pixel.
Standard: 1
completeAnimation
(string) setzen Sie den Animationstyp am Ende. Optionen: "wachsen" oder "verblassen".
Standard: " Fade ".
minimale Zeit
int) Zeit in Millisekunden, die die Ladung laufen muss. Wenn die Zeit nicht abgelaufen ist, wird die Animation trotzdem angezeigt.
Standard: 500
tiefensuche
(boolean) auf true gesetzt, um ALLE Bilder mit den ausgewählten Elementen zu finden. Wenn Sie nicht möchten, dass queryLoader die Kinder durchsucht, setzen Sie auf false.
Standard: true
prozentsatz
(boolean) Wird auf true gesetzt, um die prozentuale Darstellung zu ermöglichen.
Standard: false
onComplete
(Funktion) wird diese Funktion aufgerufen, sobald das Laden und die Animation abgeschlossen sind.
Standard: keine
onLoadComplete
(Funktion) Diese Funktion wird aufgerufen, sobald das Laden abgeschlossen ist, vor der Endanimation.
Standard: keine
