In acest tutorial este prezentat un script care simuleaza o incarcare de continut (loading), afisand o bara de incarcare.
Cand bara de progres a incarcarii este completa (ajunge la 100%), script-ul executa o functie JavaScript.
Puteti folosi acest script pentru a afisa un banner, sau orice alt continut HTML, timp de un anumit numar de secunde, apoi sa execute orice alte instructiuni JavaScript atunci cand bara de incarcare ajunge la 100%; cum ar fi de exemplu sa afiseze un buton "Inchide" pentru a elimina (ascunde) acel continut.
Pe langa functiile JavaScript, acest script utilizeaza si stiluri CSS pentru a seta inaltimea, culoarea, si lungimea initiala 0 pentru tag-ul cu bara de incarcare, dupa cum puteti vedea in codul din exemplul de mai jos.
Pentru a folosi acest script, adaugati in pagina dv. urmatorul cod HTML si JavaScript, precum si codul CSS de mai jos, pentru grafica.
Cod Script afisare bara de incarcare
<div id="loading">Aici adaugati banner-ul, sau orice cod HTML.<div id="loadbar"> </div></div>
<button onclick="simLoad('loadbar');">Click</button>
<script type="text/javascript"><!--
// by - marplo.net
var ldsec = 5; // defineste numarul de secunde pana cand bara de incarcare ajunge la 100%
var ldpercent = 5; // procentul de incarcare
var ldspeed = ldsec * 1000 / (100/ldpercent); // seteaza viteza de incarcare
// continut care sa fie afisat cat procentul aju ge la 100%
// un tag care va ascunde continutul din blocul cu bara de incarcare
var ldtxt = '<u style="cursor:pointer;" onclick="document.getElementById(\'loading\').style.display=\'none\'">Inchide</u>';
// defineste o functie recursiva care seteaza si adauga bara de progress
function simLoad(div) {
// preia obiectul cu ID-ul din "div", acesta reprezinta bara de incarcare
var dvload = document.getElementById(div);
ldpercent += 5; // mareste procentul cu 5
// modifica lungimea barei si afiseaza procentele
dvload.style.width = ldpercent+ '%';
dvload.innerHTML = ldpercent+ '%';
if(ldpercent>100) ldpercent = 100; // asigura ca procentele nu depasesc 100
// daca procentul e mai mic decat 100, functia se auto apeleaza
// altfel, apeleaza functia finLoad()
if(ldpercent<100) setTimeout("simLoad('"+div+"')", ldspeed);
else finLoad(dvload);
}
// functie care poate fi executata cand bara de incarcare este completa
// primeste ca argument obiectul ce contine tag-ul cu bara de incarcare
function finLoad(divobj) {
/** Aici puteti adauga instructiuni JavaScript care sa fie executate cand bara ajunge la 100% **/
// adauga continutul din variabila "ldtxt" (cu butonul Inchide)
divobj.innerHTML = ldtxt;
}
/// simLoad('loadbar') // pentru a afisa bara de incarcare imediat dupa ce pagina e afisata
--></script>
- Puteti sterge butonul "Click" daca apelati functia simLoad() in alt mod.
Codul CSS
<style type="text/css"><!--
#loading {
position:absolute;
top:20%;
left:40%;
width:400px;
margin:2px auto;
border:1px solid #01da02;
padding:3px;
text-align:center;
}
#loading #loadbar {
width:0%;
height:25px;
background-color:blue;
}
--></style>
Mai intai am definit variabilele pentru numarul de secunde pana cand bara de incarcare e completa, un procent folosit ca sa seteze viteza barei de progres, si un continut HTML care va fi afisat in bara de incarcare, cand ajunge la 100%.Apoi e creata o functie recursiva (simLoad() ) care foloseste setTimeout() ca sa se auto-apeleze pana cand procentul ajunge la 100. Aceasta functie mareste lungimea barei, iar cand e completa, apeleaza o alta functie care poate efectua orice instructiuni JavaScript pe care le adaugati in ea.
Vedeti si explicatiile din cod.
- Exemplu:
In urmatorul exemplu, functia simLoad() e accesata prin apasarea unui buton "Click", dar daca doriti puteti apela functia direct la incarcarea paginii web, stergand cele 3 slash-uri de la sfarsitul codului din script.
Numarul de secunde pentru a completa intreaga bara de progres e setat 5.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tutorial loading bar - marplo.net</title>
<style type="text/css"><!--
#loading {
position:absolute;
top:20%;
left:40%;
width:400px;
margin:2px auto;
border:1px solid #01da02;
padding:3px;
text-align:center;
}
#loading #loadbar {
width:0%;
height:25px;
background-color:blue;
}
--></style>
</head>
<body>
<div id="loading">Aici adaugati banner-ul, sau orice cod HTML<div id="loadbar"> </div></div>
<button onclick="simLoad('loadbar');">Click</button>
<script type="text/javascript"><!--
// by - marplo.net
var ldsec = 5; // defineste numarul de secunde pana cand bara de incarcare ajunge la 100%
var ldpercent = 5; // procentul de incarcare
var ldspeed = ldsec * 1000 / (100/ldpercent); // seteaza viteza de incarcare
// continut care sa fie afisat cat procentul aju ge la 100%
// un tag care va ascunde continutul din blocul cu bara de incarcare
var ldtxt = '<u style="cursor:pointer;" onclick="document.getElementById(\'loading\').style.display=\'none\'">Inchide</u>';
// defineste o functie recursiva care seteaza si adauga bara de progress
function simLoad(div) {
// preia obiectul cu ID-ul din "div", acesta reprezinta bara de incarcare
var dvload = document.getElementById(div);
ldpercent += 5; // mareste procentul cu 5
// modifica lungimea barei si afiseaza procentele
dvload.style.width = ldpercent+ '%';
dvload.innerHTML = ldpercent+ '%';
if(ldpercent>100) ldpercent = 100; // asigura ca procentele nu depasesc 100
// daca procentul e mai mic decat 100, functia se auto apeleaza
// altfel, apeleaza functia finLoad()
if(ldpercent<100) setTimeout("simLoad('"+div+"')", ldspeed);
else finLoad(dvload);
}
// functie care poate fi executata cand bara de incarcare este completa
// primeste ca argument obiectul ce contine tag-ul cu bara de incarcare
function finLoad(divobj) {
/** Aici puteti adauga instructiuni JavaScript care sa fie executate cand bara ajunge la 100% **/
// adauga continutul din variabila "ldtxt" (cu butonul Inchide)
divobj.innerHTML = ldtxt;
}
/// simLoad('loadbar') // pentru a afisa bara de incarcare imediat dupa ce pagina e afisata
--></script>
</body>
</html>
- Acest cod va crea o pagina web care afiseaza urmatorul rezultat (apasati pe butonul "Click"):
