Cum de a face jQuery preîncărcare pentru site-ul, șef IT

Lecția, pe care considerăm procesul de creare a unui preîncărcare pentru o pagină (pagina preîncărcare). După cum preîncărcare va utiliza pictograma Awesome Font sau un gif animație, care va fi afișat atunci când se încarcă pagina.

Pagina din orice site în timpul deschiderii sale nu se încarcă instantaneu. Pe pagina de afișare, petrece ceva timp, care poate varia de la 1 la câteva secunde. Pentru procesul (de exemplu, procesul de încărcare a paginii) într-un fel netezi utilizatorul, este în acest moment, puteți afișa o imagine animată sau o pictogramă.

Procesul de creare a unui preloader este destul de simplu și constă în faptul că trebuie să arătăm un anumit bloc (# înainte de sarcină), care conține o imagine animată sau o pictogramă, imediat după pagina de deschidere a site-ului. Și după încărcarea paginii este complet realizată, blocul (# înainte de sarcină), cu imagine GIF animat sau pictogramă pentru a fi ascunse de utilizator.

Crearea unui preloader pentru o pagină

preloader de dezvoltare, ceea ce va arata ca un fundal alb, cu pictograme animate, efectuați 3 pași:

1. Crearea HTML-cod format din bloc și pictogramele Awesome Font. Această bucată de cod trebuie să fie plasat în document, astfel încât acesta afișează primul utilizator, adică imediat după ce corpul de deschidere:

2. Crearea unui stil CSS pentru elementul div și blocul i (pictograme).

3. Pentru a adăuga un script care ascunde preloder după încărcarea paginii (de exemplu, atunci când nu va fi de sarcină din fereastra obiect):

Dacă doriți să utilizați ca un indicator al GIF animat de imagine preîncărcare, este necesar să se producă o etape ale vyshepredstavlennyh următoarele modificări:

Codul HTML pentru a elimina clasele Font Awesome:

În stiluri CSS pentru a face următoarele modificări (schimbarea regula # înainte de sarcină i # 123; .. # 125; ):