So erstellen Sie einen Awesome Image Preloader

Wie oft finden Sie, dass Bilder auf einer Website ordnungsgemäß geladen werden; die Art, bei der ein Ladesymbol zuerst angezeigt wird und das Bild dann eingeblendet wird, sobald es geladen ist? Diese Technik kann die Leistung Ihrer Website erheblich verbessern. Wenn Sie diese Methode noch nicht kennen, haben Sie Glück! Heute erstellen wir ein Preloader-Plugin für Ihre Projekte. Fasziniert? Lass uns anfangen!

Schritt 1: Einrichten Ihres Arbeitsbereichs

Zuerst richten wir den Projektordner für dieses Tutorial ein. Wir brauchen:

Unsere Haupt-HTML-Datei
CSS-Ordner für unser Stylesheet und das Ladesymbol (im Ordner 'i')
JS-Ordner für jQuery und unser Plugin
BILDER

Schritt 2: Das HTML

Wir beginnen mit dem HTML-Code.

     Image Preloader       Preloader - Laden Sie Bilder mit Stil

Nichts Besonderes: Einfach nur HTML-Code für eine einfache Galerie. Wir haben jQuery, unser Plugin, importiert jquery.preloader.js (derzeit leer) und das Stylesheet unseres Preloaders. Zum Abschluss fügen wir eine ungeordnete Liste hinzu, die Listenelemente als Bilder enthält, die von einem Ankertag umschlossen werden (normalerweise in einer Website zum Öffnen einer Lightbox oder zum Verlinken einer Website)..

Beachten Sie, dass das Extra p tag-wrapping Jeder Anker dient zur Gestaltung des Bildes. Sie sind nicht ausdrücklich erforderlich.

Schritt 3: Das CSS

Jetzt erstellen wir eine preloader.css Stylesheet in der css Ordner erstellen und darin einen Unterordner erstellen ich in dem wir unser Preloader-Symbol behalten. Preloaders.net hat eine schöne Sammlung von Ladesymbolen, aus denen Sie auswählen können. Fügen Sie Ihrem Stylesheet den folgenden Code hinzu:

 * Marge: 0; Polsterung: 0;  body Hintergrund: URL (i / bg.jpg);  #container width: 960px; Marge: 0px auto;  h2 font-weight: 100; Text-Schatten: #ffffff 1px 1px 0px; Text ausrichten: Mitte; Polsterung: 20px; Schriftgröße: 32px; Farbe: # 555555; Rahmen unten: 1px gestrichelt #ccc; Rand unten: 30px; Schriftfamilie: Georgia, "Times New Roman", Times, Serife;

Zuerst haben wir eine erstellt 960px zentrierten Container und haben der Seite einen Hintergrund hinzugefügt. Darüber hinaus haben wir dem Titel ein paar grundlegende Stylings hinzugefügt ( h2 Etikett ).

Gestalten Sie die Galerie

Als Nächstes werden wir die Galerie gestalten und, wenn wir gerade dabei sind, CSS3-Güte einbringen.

 #gallery list-style: none;  #gallery li background: # e8e8e8; Schwimmer: links; Bildschirmsperre; Rand: 1px fest # d7d7d7; -moz-border-radius: 4px; -webkit-border-radius: 4px; Grenzradius: 4px; -webkit-box-shadow: 1px 1px 6px #ddd; -moz-box-shadow: 1px 1px 6px #ddd; Box-Schatten: 1px 1px 6px #ddd; Marge: 15px 56px; Polsterung: 0;  #gallery li p border: 1px fest #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; Grenzradius: 4px; Marge: 0; Polsterung: 7px;  #gallery li a display: block; Farbe: #fff; Textdekoration: keine; Polsterung: 0;  #gallery img width: 315px; Höhe: 210px; Marge: 0; Polsterung: 0;

An dieser Stelle sollte unsere Galerie so aussehen:

Einrichten der Preloader-Klasse

Lass uns einen erstellen Preloader Klasse, die für das Anzeigen des Ladesymbols verantwortlich ist, während Bilder geladen werden.

 .preloader background: url (i / 89.gif) center center no-repeat #ffffff; Anzeige: Inline-Block;

Das Preloader-Element Anzeige Eigenschaft muss auf gesetzt sein Block oder Inline-Block; Andernfalls wird das Ladesymbol nicht angezeigt.

Schritt 4: Plugin schreiben

Beginnen wir mit der Erstellung der Plugin-Struktur und der Optionen.

Durch die Berücksichtigung von Anpassungsoptionen ist ein Plugin für den Benutzer viel flexibler.

Wir beginnen mit der Grundstruktur:

 $ .fn.preloader = Funktion (Optionen) var default = delay: 200, preload_parent: "a", check_timer: 300, ondone: function () , oneachload: function (image) , fadein: 500 ; // Variablendeklaration und Vorabcache von Bildern und übergeordnetem Container var options = $ .extend (Standardwerte, Optionen),

Unsere Optionen

verzögern - Aufeinanderfolgende Verzögerung zwischen dem Einblenden von Bildern
preload_parent - Fügen Sie dem übergeordneten Element eine Preload-Klasse hinzu. Wenn nicht gefunden, wird das Bild in ein Ankertag eingebettet
ondone - Rückruf, der ausgeführt wird, wenn alle Bilder geladen sind
oneachload - Wird aufgerufen, wenn jedes Bild mit dem Bild als Parameter geladen wird
einblenden - Animationsdauer einblenden

Schritt 5: Variablen

Als Nächstes deklarieren wir die Variablen, die wir für den Rest des Plugins verwenden werden, und legen sie im Voraus ab.

 var defaults = delay: 200, preload_parent: "a", check_timer: 300, ondone: function () , oneachload: function (Bild) , fadein: 500; // Variablendeklaration und Vorabcache von Bildern und übergeordnetem Container var options = $ .extend (Standardeinstellungen, Optionen), root = $ (this), images = root.find ("img"). css ("Sichtbarkeit": "ausgeblendet") , Deckkraft: 0), Timer, Zähler = 0, i = 0, CheckFlag = [], delaySum = options.delay;

Zuerst müssen wir das Wurzelelement vorbearbeiten (immer eine bewährte Methode), dann die Bilder finden (auch verborgen machen) und schließlich die Variablen deklarieren, die beim Gegensteuern genauer erklärt werden.

Hier gibt es zwei Dinge, die es zu beachten gilt: Vielleicht denken Sie zunächst, dass die einfachste Lösung darin besteht, die Bilder auszublenden und sie dann einzublenden, anstatt den gesamten Code durchzublättern. Das Problem ist jedoch, dass, wenn wir die Bilder ausblenden, der Browser den Platz, den sie belegten, als leer markiert, und somit das Layout selbst durcheinander gebracht wird, wenn sie schließlich eingeblendet werden. Okay, was wäre, wenn wir es verwenden würden Opazität die Bilder "anzeigen" und "ausblenden"? Dies ist eine bessere Methode, einige Versionen von IE mögen diese Methode jedoch nicht.

Schritt 6: Hinzufügen der Preloader-Klasse

Wir werden nun jedes Bildelement durchlaufen und prüfen, ob das übergeordnete Element das in der Option angegebene Element ist. Wenn ja, fügen wir unsere Preloader-Klasse hinzu. Andernfalls wickeln wir das Bild in ein Ankertag mit der Klasse Preloader.

 images.each (function () var $ this = $ (this); if ($ this.parent (options.preload_parent) .length == 0) $ this.wrap (""); else $ this. parent (). addClass ("preloader"); checkFlag [i ++] = false;); images = $ .makeArray (Bilder);

Hier verwenden wir ein Array checkFlag, und setzen den Elementwert jedes Arrays auf falsch. Ihre Verwendung wird klar, wenn Sie sich fortbewegen.

Schritt 7: Alles zusammenbringen

Wir werden jetzt implementieren, was tatsächlich hinter den Kulissen passiert. Da ist ein boolean Eigenschaft, genannt Komplett, dem Bildobjekt zugeordnet. Wenn das Bild vollständig geladen wurde, ist dieser Boolean auf gesetzt wahr. Daher prüfen wir diese Eigenschaft für jedes Bild und ob es tatsächlich auf festgelegt ist wahr, Wir blenden in diesem Bild ein.

Wir können die verwenden setInterval Funktion, um kontinuierlich zu bestimmen, ob die Bilder geladen wurden oder nicht. Dies ist, wo die check_timer Option kommt herein: sie bildet direkt die Frequenz unseres Timers ab.

Ein Bild hat auch eine onload Ereignis damit verbunden; Sie fragen sich wahrscheinlich, warum wir es nicht benutzen. Der Grund ist, dass einige Browser mit diesem Ereignis nicht gut funktionieren. als solche überspringen wir es. Wir brauchen eine Lösung, die in allen Browsern wie ein Zauber wirkt. Wir beginnen mit:

 init = function () timer = setInterval (function () , options.check_timer);

Timer ist die Variable, die den Timer referenziert. Dies ist erforderlich, um den Timer eventuell zu stoppen. Diese Funktion wird zusammen mit allen Variablen deklariert.

Jedes Bild überprüfen

Wir durchlaufen das Array und überprüfen jedes Bild Komplett Eigenschaft, um festzustellen, ob der Download abgeschlossen ist. Wenn es heruntergeladen wurde, werden wir es sichtbar machen und langsam einblenden. Wenn die Animation beendet ist, entfernen wir die Preloader-Klasse aus dem übergeordneten Element.

 für (i = 0; i  Hier gibt es ein winziges Problem: Der Timer wird weiter prüfen - sogar nach dem Die Bilder wurden alle geladen. Um dem entgegenzuwirken, fügen wir eine Zählervariable hinzu und erhöhen diese, nachdem jedes Bild geladen wurde. Auf diese Weise können wir überprüfen, ob die Zählervariable der Größe des Bilder-Arrays entspricht. Wenn das der Fall ist, hören wir auf.
  timer = setInterval (function () if (counter> = checkFlag.length) clearInterval (timer); options.ondone (); return; für (i = 0; i Allerdings gibt es jetzt ein weiteres kleines Problem. Unser Timer kann früher als erwartet anhalten. Wenn ein Bild geladen wurde, ist es das Komplett Eigenschaft wurde auf gesetzt wahr Der Zähler wird also um 1 erhöht. Wenn nun die Schleife das nächste Mal ausgeführt wird, ist das Bild bereits geladen Komplett Eigenschaft ist auf gesetztwahr, und somit läuft die Schleife zweimal! Um dieses Problem zu überwinden, verwenden wir die checkFlag Array. Wenn ein Bild geladen ist, werden wir einstellen checkFlag zu wahr, und stellen Sie die Bedingung für den Zähler so ein, dass er nur unter der Bedingung erhöht wird, dass die checkFlag Wert ist falsch. Der Zähler wird also nur einmal erhöht, wenn ein Bild zum ersten Mal geladen wird.
  timer = setInterval (function () if (counter & gt; = checkFlag.length) clearInterval (timer); options.ondone (); return; für (i = 0; i. images.length; i ++) if (images [i] .complete == true) if (checkFlag [i] == false) checkFlag [i] = true; options.oneachload (images [i]); counter ++; delaySum = delaySum + -Optionen. delay; $ (images [i]). css ("Sichtbarkeit", "sichtbar"). delay (delaySum) .animate (Deckkraft: 1, options.fadein, function () $ (this) .parent ( ) .removeClass ("preloader"););, options.check_timer);
  Beachten Sie, dass wir das nennen ondone Funktion, wenn das Zählerflag größer als die Länge des Arrays ist - d. h. wenn alle Bilder geladen sind. Wenn der Zähler erhöht wird, oneachload wird aufgerufen, wobei das aktuelle Bild als Parameter übergeben wird.
 
  Schritt 8: Der einfache Teil 
 Schließlich nennen wir in diesem Schritt die drin(); Funktion am Ende des Plugins. 
  drin(); // in der letzten Zeile des Plugins aufgerufen
 Das ist alles; Wir haben ein voll funktionsfähiges Preloading-Plugin erstellt, dessen Größe weniger als 2 KB beträgt. Es bleibt jedoch ein Problem: Das Ladesymbol wird zufällig geladen. Wir wollen das nicht. Im nächsten Abschnitt werden wir uns darum kümmern.
 
  Schritt 9: Die Extrameile gehen 
  Um das oben genannte Problem zu beheben, laden wir zuerst das Symbol und rufen dann das Symbol auf drin Funktion. Das Ladesymbol ist jedoch ein Hintergrundbild, also fügen wir es als Bild in die Seite ein, wobei es verborgen bleibt. Wenn es geladen wird, nennen wir das drin Funktion. Wir laden im Wesentlichen das Icon selbst vor. 
  var icon = jQuery ("", id: 'loadingicon', src: 'css / i / 89.gif'). hide (). appendTo (" body "); timer = setInterval (function () if (icon [0] .complete) == true) clearInterval (Timer); init (); icon.remove (); return;, 100);
 Zuerst erstellen wir ein Bildobjekt mit einem Ich würde von loadingicon, und ein Quelle zeigt auf den Pfad des Ladesymbols. Dann hängen wir es an Karosserie und verstecke es anfangs. Zuletzt legen wir das Intervall fest, um zu prüfen, ob das Symbol geladen wurde oder nicht. Ist dies der Fall, wird der Timer abgebrochen und die Bilder werden vorab geladen. Vergiss nicht, auch dieses Symbol zu entfernen! 
 
 Fazit
 Mit diesem letzten Schritt sind wir fertig! Diese Funktionalität funktioniert wie erwartet in allen Browsern und wird ordnungsgemäß herabgesetzt. Stellen Sie einfach sicher, dass das Preloader-Element eingestellt ist Anzeige Eigentum an Block oder Inline-Block. Es kann jetzt in Ihren Projekten verwendet werden. Danke fürs Lesen!



		
			
	   
	




Code