Set de afișare și a ascunde pagina pentru a finaliza descărcarea

La site-uri cu un număr mare de conținut divers, precum și multe navigație suplimentare și de rotație a elementelor este de multe ori (nu mă tem de cuvântul) necesitatea de a stabili un indicator de încărcare pagină web. Și este de dorit să se ascundă conținutul acestei pagini pentru întreaga disponibilitate pentru vizitator nu a vedea modul în care browserul blochează rândul său, site-ul lor, plasându-le în locurile lor, încărcarea de fișiere CSS cu altcineva, și nu cel mai rapid hosting.
Pentru a face o astfel de adaos poate fi foarte simplu. Acest articol prezintă două exemple de aplicare a unității funcționale și indicator de încărcare site folosind jQuery.
EXEMPLUL 1
In aceasta varianta, funcția utilizată jQuery .load (). care se ocupă de evenimentul de pe pagina de încărcare în timp ce manipuleaza elemente HTML adăugate.
Pentru realizarea este necesară pentru a crea două blocuri:
- avertizare, indicator de descărcare:

X Pagina se încarcă.

așteaptă

- și un bloc gol, care va ascunde sau ascunde pagina prin limitarea accesului la acesta:

Ele pot fi plasate oriunde pe corpul documentului, dar este mai bine mai sus (mai devreme), și anume imediat după deschiderea .
Locația de pe pagină și apariția corespunzătoare a acestor blocuri este dată de utilizarea CSS:

hidescreen,
.Poziția load_page: fix;
display: none; / * Blocuri Inițial ascunse * /
>
.hidescreen z-index: 9998;
lățime: 100%;
înălțime: 100%;
fundal: # 000000;
opacitate: 0,7;
Filtru: alpha (opacitatea = 70);
stânga: 0;
top: 0;
>
.load_page z-index: 9999; / * Valoarea trebuie să fie mai mare decât .hidescreen * /
stânga: 50%;
top: 50%;
fundal: #FFFFFF;
padding: 30px 10px;
text-align: center;
font: normal normală 15px Verdana;
border-radius: 3px;
margin-left: -125px;
lățime: 250px;
>
.închide <
Poziția: absolută;
top: 10px;
dreapta: 10px;
frontieră: solid 1px # 666;
border-radius: 2px;
font: normal bold 12px / 14px Comic Sans MS;
text-align: center;
fundal: #fff;
Culoare: # C00;
cursor: pointer;
înălțime: 14px;
lățime: 13px;
>
.închidere: hover <
fundal: # C00;
Culoare: #fff;
>

Rămâne doar pentru a plasa jQuery cod script într-o pagină sau un site. Nu uitați să verificați dacă cadrul este conectat la site-ul, în cazul în care nu există - conectați. Script-ul în sine nu este mare și este după cum urmează:

$ (Function () $ ( 'load_page hidescreen ..') FadeIn (10). // prezintă fundalul și indicatorul
$ (Fereastră) .load (funcția () $ ( 'hidescreen, .load_page.') FadeOut (600). // ascunde atunci când se încarcă pagina
>);
$ ( 'Închide'). Faceți clic (function () $ ( 'Hidescreen, .load_page') fadeOut (300) .;
>);
>);

$ (Function () $ (fereastră) .load (funcția () $ ( 'hidescreen, .load_page.') Delay (1000) .fadeOut (600) .;
>);
$ ( 'Închide') Faceți clic pe (funcție () $ ( 'hidescreen, .load_page.') FadeOut (300) .dequeue () ..;
>);
>);

articole similare

Pagina anterioară

Pagina următoare