Cum se creează un preloader de imagini minunat

Cât de des găsiți că imaginile dintr-un site se încarcă grațios; tipul în care apare prima dată o pictogramă de încărcare și imaginea se estompează odată încărcată? Această tehnică poate spori foarte mult performanța site-ului dvs. web. Dacă nu sunteți deja familiarizat cu această metodă, aveți noroc! Astăzi, vom crea un plugin de preloader pentru proiectele dvs. Intrigat? Să începem!

Pasul 1: Configurarea spațiului dvs. de lucru

În primul rând, vom configura dosarul proiectului pentru acest tutorial. Vom avea nevoie de:

Fișierul nostru HTML principal
Dosarul CSS pentru foaia de stil și pictograma de încărcare (în folderul "i")
Dosarul JS pentru jQuery și plugin-ul nostru
IMAGINI

Pasul 2: HTML-ul

Vom începe cu codul HTML.

     Preloader de imagini       Preloader - Încărcați imagini cu stil

Nimic nu este aici: simplu cod HTML pentru o galerie simplă. Am importat jQuery, plugin-ul nostru jquery.preloader.js (în prezent necompletat) și foaia de stil a preloaderului. Pentru a termina, vom adăuga o listă neordonată, care va conține elemente de listă ca imagini înfășurate printr-o etichetă de ancorare (de obicei făcută într-un site web pentru deschiderea unei casete lightbox sau pentru conectarea la un site).

Rețineți că extra p etichetarea ambalajelor fiecare ancora este utilizată în scopul de a modela imaginea; acestea nu sunt cerute explicit.

Pasul 3: CSS

Acum, vom crea o preloader.css foaie de stil în css și, în interiorul acestuia, creați un subfolder eu în care vom păstra pictograma preloader. Preloaders.net are o colecție frumoasă de pictograme de încărcare de care puteți alege. Adăugați următorul cod în foaia de stil:

 * marja: 0; padding: 0;  organism background: url (i / bg.jpg);  #container width: 960px; margine: 0 pixeli auto;  h2 font-greutate: 100; text-shadow: #ffffff 1px 1px 0px; text-align: center; padding: 20px; font-size: 32px; culoare: # 555555; margine de fund: 1px dashed #ccc; margin-bottom: 30px; font-familie: Georgia, "Times New Roman", Times, serif;

În primul rând, am creat o 960 x centrat și a adăugat un fundal paginii. În plus, am adăugat un anumit stil de bază titlului ( h2 etichetă ).

Modelarea Galeriei

Apoi, vom modela galeria și, în timp ce suntem la ea, aruncăm o bunătate CSS3.

 #gallery style-style: none;  #gallery li fundal: # e8e8e8; plutește la stânga; display: block; frontieră: 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 frontieră: 1px solid #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin: 0; padding: 7px;  #galeria a display: bloc; Culoare: #fff; text-decoration: none; padding: 0;  #galerie img lățime: 315px; height: 210px; margin: 0; padding: 0;

În acest moment, galeria noastră ar trebui să arate așa:

Configurarea clasei Preloader

Să creăm a preloader clasa care va fi responsabilă pentru afișarea pictogramei de încărcare, în timp ce imaginile se încarcă.

 .preloader background: url (i / 89.gif) centru de centru no-repeat #ffffff; display: inline-block;

Elementul preloader afişa proprietatea trebuie să fie setată la bloc sau bloc inline; în caz contrar, pictograma de încărcare nu se va afișa.

Pasul 4: Scrierea pluginului

Să începem prin crearea structurii plugin-ului și a opțiunilor.

Permiterea opțiunilor de personalizare face ca un plugin să fie mult mai flexibil pentru utilizator.

Începem cu structura de bază:

 $ .fn.preloader = funcție (opțiuni) var defaults = întârziere: 200, preload_parent: "a", check_timer: 300, ondone: ; // declarația variabilelor și imaginile precacing și opțiunile pentru opțiunile de tip parent parent var = $ .extend (implicite, opțiuni),

Opțiunile noastre

întârziere - Întârzierea succesivă între decolorare în imagini
preload_parent - Adăugați clasa de preîncărcare la părintele menționat. Dacă nu este găsit, imaginea este înfășurată într-o etichetă de ancorare
ondone - Redirecționarea pentru a fi executată când toate imaginile sunt încărcate
oneachload - Numit atunci când fiecare imagine este încărcată cu imagine ca parametru
fadein - Fade în durata de animație

Pasul 5: Variabile

Apoi, declarăm și precachezăm variabilele pe care le vom folosi în restul pluginului.

 var defaults = întârziere: 200, preload_parent: "a", check_timer: 300, ondone: funcție () , oneachload: funcție (imagine) , fadein: 500; // cs ("visibility": "ascuns") este o optiune de tipare a variabilelor, , opacitate: 0), timer, contra = 0, i = 0, checkFlag = [], delaySum = options.delay;

Mai întâi, preechilibrăm elementul rădăcină (mereu o bună practică), apoi găsim imaginile (făcându-le și ascunse) și în final declarăm variabilele care vor fi explicate mai detaliat pe măsură ce le contracarăm.

Există două lucruri care merită remarcate aici: s-ar putea să credeți inițial că cea mai ușoară soluție este să ascundeți imaginile și apoi să le estompeți, mai degrabă decât să săriți peste tot acest cod. Cu toate acestea, problema este că, dacă ascundem imaginile, browser-ul marchează spațiul pe care îl ocupau ca gol și, prin urmare, aspectul, în sine, este încurcat atunci când acestea sunt în cele din urmă estompate inch Bine, bine dacă am folosit opacitate pentru a "arăta" și a "ascunde" imaginile? Aceasta este o practică mai bună, însă, unele versiuni ale IE nu-i place această metodă.

Pasul 6: Adăugarea clasei Preloader

Acum vom itera peste fiecare element de imagine și vom verifica dacă părintele său este cel menționat în opțiune. Dacă da, adăugăm clasa noastră de preloader; altfel, vom împacheta imaginea într-o etichetă de ancoră cu o clasă de preloader.

 () ($ this.wrap (")); altceva $ this. părinte (), addClass ("preloader"); checkFlag [i ++] = false;); imagini = $ .makeArray (imagini);

Aici, folosim o matrice checkFlag, și setează valoarea elementului fiecărei matrice fals. Utilizarea sa va fi clarificată pe măsură ce vă deplasați.

Pasul 7: Aduceți-i pe toți împreună

Vom implementa acum ceea ce se întâmplă de fapt în spatele scenei. Este un boolean proprietate, numit complet, asociat cu obiectul imaginii. Când imaginea a fost încărcată complet, această booleană este setată la Adevărat. Deci, continuăm să verificăm această proprietate pentru fiecare imagine și, dacă este într-adevăr setată Adevărat, se estompează în acea imagine.

Putem folosi setInterval pentru a determina continuu dacă imaginile au fost încărcate sau nu. Aici este locul unde check_timer opțiunea vine în: hărți direct la frecvența noastră de timp.

O imagine are și o imagine onload eveniment asociat cu acesta; probabil că te întrebi de ce nu o folosim. Motivul este că unele browsere nu funcționează bine cu acel eveniment; ca atare, o sărim. Avem nevoie de o soluție care să funcționeze ca un farmec în toate browserele. Începem cu:

 init = funcția () timer = setInterval (funcția () , opțiunile.check_timer);

timer este variabila care va face referire la cronometru. Acest lucru este necesar pentru a opri eventual cronometrul. Această funcție este declarată împreună cu toate variabilele.

Verificarea fiecărei imagini

Vom itera prin matrice și vom verifica fiecare imagine complet proprietate pentru a determina dacă a terminat descărcarea. Dacă a fost descărcat, îl vom seta vizibil și va disparea încet. Când animația sa încheiat, eliminăm clasa de preloadere de la părintele ei.

 pentru (i = 0; i  Există o mică problemă aici: timerul va continua să verifice - chiar după imaginile au fost încărcate. Pentru a contracara acest lucru, vom adăuga o variabilă contra și vom crește după ce fiecare imagine a fost încărcată. În acest fel, putem verifica dacă variabila contra este egală cu dimensiunea matricei de imagini. Dacă este așa, ne oprim.
  timer = setInterval (funcția () if (counter> = checkFlag.length) clearInterval (timer); options.ondone (); Cu toate acestea, există încă o problemă mică. Timerul nostru se poate opri mai devreme decât se aștepta; dacă o imagine a fost încărcată complet proprietatea a fost setată la Adevărat iar contorul se mărește cu 1. Acum, când buclă rulează data viitoare, imaginea este deja încărcată complet proprietatea este setată laAdevărat, și, astfel, buclă va rula de două ori! Pentru a depăși această problemă, folosim checkFlag matrice. Atunci când o imagine este încărcată, vom seta checkFlag la Adevărat, și setați condiția ca contorul să crească numai cu condiția ca checkFlag valoarea este fals. Astfel, contorul este incrementat o singură dată: atunci când o imagine este încărcată pentru prima dată.
  Timer = setInterval (funcția () if (contra & gt; = checkFlag.length) clearInterval (timer); options.ondone () return; pentru (i = if (imagini [i] .complete == true) if (checkFlag [i] == false) checkFlag [i] = true; options.oneachload (images [i]); întârziere; $ (imagini [i]) css ("vizibilitate", "vizibilă"). ) .removeClass ("preloader"););, options.check_timer);
  Rețineți că numim ondone atunci când stegulețul este mai mare decât lungimea matricei - adică când toate imaginile sunt încărcate. Atunci când contorul este incrementat, oneachload se numește cu imaginea curentă trecută ca parametru.
 
  Pasul 8: Partea ușoară 
 În cele din urmă, în acest pas, numim init (); funcția de la sfârșitul pluginului. 
  init (); // sunat la ultima linie de plugin
 Asta e tot; am facut un plug-in de preloading complet de lucru, iar dimensiunea sa este mai mica de 2kb. Cu toate acestea, rămâne o problemă: imaginea cu pictograma de încărcare este încărcată în mod aleatoriu. Nu vrem asta. În secțiunea următoare vom avea grijă de asta.
 
  Pasul 9: Mergeți la Extra Mile 
  Pentru a remedia problema menționată mai sus, vom încărca mai întâi pictograma și apoi vom apela init funcţie. Dar pictograma de încărcare este o imagine de fundal, deci o injectăm ca o imagine în pagină, păstrând-o ascunsă. Când se încarcă, sunăm init funcţie. În esență, preîncărcăm pictograma. 
  var icon = jQuery (""id: 'loadingicon', src: 'css / i / 89.gif') hide () appendTo (" corp "); == true) clearInterval (timer); init (); icon.remove (); return;, 100);
 Mai întâi vom crea un obiect de imagine cu un id de loadingicon, și a sursă indicând calea pictogramei de încărcare. Apoi, îl adăugăm corp și ascunde-o inițial. În sfârșit, setăm intervalul pentru a verifica dacă pictograma a fost încărcată sau nu. Dacă este cazul, vom ucide temporizatorul și vom începe să preîncărcați imaginile. Nu uitați să eliminați pictograma respectivă! 
 
 Concluzie
 Cu ultimul pas, am terminat! Această funcționalitate funcționează în toate browserele, așa cum era de așteptat, și se degradează grațios. Asigurați-vă că setați elementul preloader afişa proprietate la bloc sau inline-block. Acum este gata să fie utilizat în proiectele dvs. Vă mulțumim pentru lectură!



		
			
	   
	




Cod