În funcție de tipul de resurse web și cantitatea de informații cu privire la aceasta, încărcați site-ul poate dura de la câteva milisecunde la câteva secunde. În timpul procesului de boot cu site-ul poate fi o mulțime de lucruri: aspect poate sări în direcții diferite, textul poate schimba stilul fontului. Există destul de o dorinta naturala de a ascunde toate aceste orgie departe de ochii vizitatorilor. Pentru aceasta și preloaders proiectate.
Preîncărcare - un indicator de încărcare site-ului. Acesta poate fi configurat fie ca GIF animat-imagine și o scară de încărcare. Dar, indiferent de aspectul preloader, principiul său de lucru este același: cât mai curând posibil, pentru a arăta indicatorul de încărcare de utilizator, și după încărcarea indicatorului de acoperire.
Cum se încarcă o pagină web
Ai nevoie pentru a înțelege procesul înainte de a crea un indicator de orice proces. Încărcarea paginilor web - nu este o excepție. Deci, cum vă încărcați o pagină web?
Ordinea de pagini web de încărcare vizual
Procesul de creare
Acum, cunoscând ordinea paginii web este încărcată, este posibil pentru a genera o listă de sarcini și condiții pentru preloader noastre. Condițiile mele pentru ea sunt după cum urmează:
Dacă pagina dvs. este aproape independentă de grafică, în loc de window.onload pentru a ascunde preîncărcare poate folosi DOM Ready.
Pentru a rezolva prima problemă a pus următorul cod HTML-cod imediat după eticheta de deschidere a corpului.
Pentru stilurile noastre de preîncărcare avem nevoie, dar depind de fișiere externe, nu vrem, asa ca plasati stilurile direct în document, oriunde în interiorul capului.
Din păcate, complet abandoneze resursele externe nu au venit în, pentru că avem un GIF animat imagine. Cu toate acestea, având în vedere dimensiunea redusă a imaginii este sacrificiu acceptabil.
Acum trebuie doar să se ascundă de preîncărcare noastre atunci când pagina încarcă. Aici nu mai avem resurse limitate, astfel încât să putem folosi jQuery:
Gata! Acum, în loc de a sari la diferite părți ale vizitatorului aspect în timpul de încărcare al paginii va vedea ecranul cizma elegant. O versiune de lucru a preloader poate fi văzut pe site-ul Edward Akulova.