Tutorial preincarcare site in fundal.
Salutare tuturor! Am revenit cu un nou tutorial pentru voi 🙂 .
Astazi o sa va arat cum sa faceti ca site-ul Dvs. sa se incarce in fundal, iar cand toate elementele si resursele necesare au fost incarcate, preloaderul (adica un element care apare peste pagina si nu dispare orice s-ar inampla pana nu spune site-ul sa faca asta) o sa dispara.
Pentru inceput aveti nevoie de JQuery. Daca nu aveti JQuery pe site-ul Dvs. il puteti adauga foarte usor folosind urmatorul cod HTML:
1 |
<script type='text/javascript' src='https://www.baxandrei.ro/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script> |
Prima data trebuie sa adaugam urmatorul cod CSS pe pagina noastra:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fefefe; z-index: 999999; height: 100%; } #status { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; background-image: url(https://www.baxandrei.ro/wp-content/uploads/2016/04/ajax-loader.gif); background-repeat: no-repeat; background-position: center; margin: -100px 0 0 -100px; } |
Acum, trebuie sa adaugam urmatorul cod HTML imediat dupa tagul :
1 2 3 |
<div id="preloader"> <div id="status"> </div> </div> |
Acum tot ce mai trebuie sa facem este sa adaugam un cod HTML cu o comanda JavaScript in el care trimite site-ului mesaj sa ascunda preloaderul imediat ce tot site-ul a fost incarcat.
Tot ce trebuie sa facem este sa adaugam acest cod imediat dupa </body> :
1 2 3 4 5 6 |
<script> jQuery(window).load(function() { jQuery("#status").fadeOut(); jQuery("#preloader").delay(1000).fadeOut("slow"); }) </script> |
Acum totul este gata. Site-ul Dvs. are acum un preloader identic cu cel de pe BaxAndrei.Ro care dispare imediat dupa ce pagina s-a incarcat complet.
Daca doriti sa schimbati poza care apare in timp ce se incarca pagina, nu trebuie decat sa schimbati adresa acestei imagini (
https://www.baxandrei.ro/wp-content/uploads/2016/04/ajax-loader.gif
Asta a fost tot pe astazi! Ne vedem data viitoare cu un nou articol 🙂