Come creare un impressionante preloader di immagini

Quante volte trovi che le immagini di un sito web si caricano con garbo; il tipo in cui appare per la prima volta un'icona di caricamento e l'immagine si dissolve, una volta caricata? Questa tecnica può migliorare notevolmente le prestazioni del tuo sito web. Se non conosci già questo metodo, sei fortunato! Oggi creeremo un plug-in per il preloader per i tuoi progetti. Incuriosito? Iniziamo!

Passaggio 1: impostazione dell'area di lavoro

Per prima cosa, configureremo la cartella del progetto per questo tutorial. Avremo bisogno di:

Il nostro file HTML principale
Cartella CSS per il nostro foglio di stile e l'icona di caricamento (nella cartella 'i')
Cartella JS per jQuery e il nostro plugin
IMMAGINI

Passaggio 2: l'HTML

Cominceremo col codice HTML.

     Preloader di immagine       Preloader: carica le immagini con stile

Niente di eccezionale qui: solo un semplice codice HTML per una semplice galleria. Abbiamo importato jQuery, il nostro plugin jquery.preloader.js (attualmente vuoto) e il foglio di stile del nostro preloader. Per finire, aggiungeremo un elenco non ordinato, che conterrà gli elementi dell'elenco come immagini racchiuse da un tag di ancoraggio (solitamente fatto in un sito Web per l'apertura di un lightbox o il collegamento a un sito).

Si noti che l'extra p il tag che avvolge ogni ancoraggio è usato allo scopo di modellare l'immagine; non sono esplicitamente richiesti.

Passaggio 3: il CSS

Ora, creeremo un preloader.css foglio di stile nel css cartella e, al suo interno, crea una sottocartella io in cui manterremo l'icona del preloader. Preloaders.net ha una bella collezione di icone di caricamento tra cui puoi scegliere. Aggiungi il seguente codice al tuo foglio di stile:

 * margine: 0; padding: 0;  body background: url (i / bg.jpg);  #container width: 960px; margine: 0px auto;  h2 font-weight: 100; text-shadow: #ffffff 1px 1px 0px; text-align: center; padding: 20px; font-size: 32px; color: # 555555; border-bottom: 1px dashed #ccc; margin-bottom: 30px; famiglia di font: Georgia, "Times New Roman", Times, serif;

In primo luogo, abbiamo creato un 960px contenitore centrato e aggiunto uno sfondo alla pagina. Inoltre, abbiamo aggiunto alcuni stili di base al titolo ( h2 tag).

Disegnare la Galleria

Successivamente, modificheremo la galleria e, mentre ci siamo, aggiungiamo un po 'di bontà CSS3.

 #gallery list-style: none;  #gallery li background: # e8e8e8; float: sinistra; blocco di visualizzazione; border: 1px solid # d7d7d7; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 1px 6px #ddd; -moz-box-shadow: 1px 1px 6px #ddd; box-shadow: 1px 1px 6px #ddd; margine: 15px 56px; padding: 0;  #gallery li p border: 1px solid #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin: 0; padding: 7px;  #gallery li a display: block; color: #fff; text-decoration: none; padding: 0;  #gallery img width: 315px; altezza: 210px; margin: 0; padding: 0;

A questo punto, la nostra galleria dovrebbe apparire così:

Impostazione della classe Preloader

Creiamo a preloader classe che sarà responsabile di mostrare l'icona di caricamento, mentre le immagini si stanno caricando.

 .preloader background: url (i / 89.gif) centro centro nessuna ripetizione #ffffff; display: inline-block;

L'elemento del preloader display la proprietà deve essere impostata su bloccare o blocco in linea; in caso contrario, l'icona di caricamento non verrà visualizzata.

Passaggio 4: scrittura del plug-in

Iniziamo creando la struttura e le opzioni del plugin.

La possibilità di personalizzare le opzioni rende un plugin molto più flessibile per l'utente.

Iniziamo con la struttura di base:

 $ .fn.preloader = function (options) var defaults = delay: 200, preload_parent: "a", check_timer: 300, ondone: function () , oneachload: function (image) , fadein: 500 ; // dichiarazione delle variabili e precaching delle immagini e opzioni del contenitore genitore var = $ .extend (default, opzioni),

Le nostre opzioni

ritardo - Ritardo successivo tra dissolvenza nelle immagini
preload_parent - Aggiungi la classe di precarico al genitore menzionato. Se non viene trovato, l'immagine viene avvolta in un tag di ancoraggio
ondone - Richiamata da eseguire quando vengono caricate tutte le immagini
oneachload - Chiamato quando ogni immagine viene caricata con l'immagine come parametro
fadein - Dissolvenza nella durata dell'animazione

Passaggio 5: variabili

Successivamente, dichiariamo e precache le variabili che verranno utilizzate nel resto del plug-in.

 var defaults = delay: 200, preload_parent: "a", check_timer: 300, ondone: function () , oneachload: function (image) , fadein: 500; // dichiarazione delle variabili e precaching delle immagini e contenitore genitore opzioni var = $ .extend (default, opzioni), root = $ (this), images = root.find ("img"). css ("visibility": "hidden" , opacità: 0), timer, contatore = 0, i = 0, checkFlag = [], delaySum = options.delay;

Innanzitutto, precache l'elemento radice (sempre una best practice), quindi trova le immagini (rendendole anche nascoste) e infine dichiara le variabili che verranno spiegate in maggiore dettaglio mentre le neutralizziamo.

Ci sono due cose che vale la pena notare qui: inizialmente si potrebbe pensare che la soluzione più semplice sia quella di nascondere le immagini e poi sbiadirle, piuttosto che saltare attraverso tutto questo codice. Tuttavia, il problema è che, se nascondiamo le immagini, il browser segna lo spazio che occupavano come vuoto, e quindi il layout stesso è incasinato quando alla fine si dissolvono. Ok, beh, se usassimo opacità "mostrare" e "nascondere" le immagini? Questa è una pratica migliore, tuttavia alcune versioni di IE non amano questo metodo.

Passaggio 6: aggiunta della classe Preloader

Ora eseguiremo l'iterazione su ciascun elemento dell'immagine e controlleremo se il suo genitore è quello menzionato nell'opzione. Se è così, aggiungiamo la nostra classe di preloader ad esso; altrimenti, avvolgiamo l'immagine all'interno di un tag di ancoraggio con una classe di 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 (immagini);

Qui, stiamo usando un array checkFlag, e stanno impostando il valore di ciascun elemento dell'array su falso. Il suo uso sarà chiarito man mano che ti sposti.

Step 7: Portare tutto insieme

Ora implementeremo ciò che effettivamente accade dietro le quinte. C'è un booleano proprietà, chiamato completare, associato all'oggetto dell'immagine. Quando l'immagine è stata caricata completamente, questo valore booleano è impostato su vero. Quindi continuiamo a controllare questa proprietà per ogni immagine e, se è effettivamente impostata su vero, noi svaniamo in quell'immagine.

Possiamo usare il setInterval funzione per determinare continuamente se le immagini sono state caricate o meno. Questo è dove il check_timer l'opzione arriva: si mappa direttamente alla frequenza del nostro timer.

Un'immagine ha anche un onload evento associato ad esso; ti starai probabilmente chiedendo perché non lo stiamo usando. Il motivo è perché alcuni browser non funzionano bene con quell'evento; come tale, lo stiamo saltando. Abbiamo bisogno di una soluzione che funzioni come un fascino su tutti i browser. Iniziamo con:

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

Timer è la variabile che farà riferimento al timer. Questo è necessario al fine di fermare il timer. Questa funzione è dichiarata insieme a tutte le variabili.

Controllo di ogni immagine

Verificheremo l'array e controlleremo ogni immagine completare proprietà per determinare se ha completato il download. Se è stato scaricato, lo imposteremo su visibile e si dissolverà lentamente. Quando l'animazione è terminata, rimuoviamo la classe preloader dal suo genitore.

 per (i = 0; i  C'è un piccolo problema qui: il timer continuerà a controllare - anche dopo le immagini sono state tutte caricate. Per contrastare questo, aggiungeremo una variabile contatore e la incrementeremo dopo ogni immagine caricata. In questo modo, possiamo verificare se la variabile contatore è uguale alla dimensione della matrice di immagini. Se è così, ci fermiamo.
  timer = setInterval (function () if (counter> = checkFlag.length) clearInterval (timer); options.ondone (); return; for (i = 0; i Tuttavia, ora c'è un altro piccolo problema. Il nostro timer potrebbe fermarsi prima del previsto; se è stata caricata un'immagine, la sua completare proprietà è stata impostata su vero e il contatore aumenta quindi di 1. Ora, quando il ciclo viene eseguito la volta successiva, l'immagine è già caricata, il completare la proprietà è impostata suvero, e, quindi, il ciclo verrà eseguito due volte! Per superare questo problema, usiamo il checkFlag array. Quando un'immagine è caricata, imposteremo checkFlag a vero, e impostare la condizione per il contatore di incrementare solo a condizione che il checkFlag il valore è falso. Quindi il contatore viene incrementato una sola volta: quando un'immagine viene caricata per la prima volta.
  timer = setInterval (function () if (counter & gt; = checkFlag.length) clearInterval (timer); options.ondone (); return; for (i = 0; i & lt; images.length; i ++) if (images [i] .complete == true) if (checkFlag [i] == false) checkFlag [i] = true; options.oneachload (images [i]); counter ++; delaySum = delaySum + options. delay; $ (images [i]). css ("visibility", "visible"). delay (delaySum) .animate (opacity: 1, options.fadein, function () $ (this) .parent ( ) .removeClass ("preloader"););, options.check_timer);
  Nota che chiamiamo il ondone funzione quando il flag del contatore è maggiore della lunghezza dell'array - cioè quando vengono caricate tutte le immagini. Quando il contatore viene incrementato, oneachload viene chiamato con l'immagine corrente passata come parametro.
 
  Step 8: La parte facile 
 Infine, in questo passaggio, chiamiamo il dentro(); funzione alla fine del plugin. 
  dentro(); // chiamato all'ultima linea di plugin
 È tutto; abbiamo creato un plug-in di preloading funzionante e la sua dimensione è inferiore a 2kb. Tuttavia, rimane un problema: l'immagine dell'icona di caricamento viene caricata casualmente. Non lo vogliamo. Nella prossima sezione ci penseremo noi.
 
  Step 9: Going the Extra Mile 
  Per risolvere il problema sopra menzionato, prima caricheremo l'icona, quindi chiameremo il dentro funzione. Ma l'icona di caricamento è un'immagine di sfondo, quindi la iniettiamo come immagine nella pagina, mantenendola nascosta. Quando si carica, chiamiamo il dentro funzione. Stiamo essenzialmente pre-caricando l'icona stessa. 
  var icon = jQuery ("", id: 'loadingicon', src: 'css / i / 89.gif'). hide (). appendTo (" body "); timer = setInterval (function () if (icona [0]. == true) clearInterval (timer); init (); icon.remove (); return;, 100);
 Per prima cosa creiamo un oggetto immagine con un id di loadingicon, e a fonte indicando il percorso dell'icona di caricamento. Quindi, aggiungiamo il corpo e inizialmente lo nascondi. Infine, impostiamo l'intervallo per verificare se l'icona è stata caricata o meno. Se lo è, uccidiamo il timer e iniziamo il precaricamento delle immagini. Non dimenticare di rimuovere anche quell'icona! 
 
 Conclusione
 Con quell'ultimo passo, abbiamo finito! Questa funzionalità funziona in tutti i browser, proprio come previsto, e degrada dolcemente. Assicurati di impostare l'elemento del preloader display proprietà a bloccare o inline-block. Ora è pronto per essere utilizzato nei tuoi progetti. Grazie per aver letto!



		
			
	   
	




Codice