efekat "Loading..."

[ lukeguy @ 09.03.2006. 20:59 ] @

pravim nekakvu web aplikaciju koja radi u kombinaciji PHP-a i JavaScripta, a oslanja se na AJAX. ono što mi nije jasno je kako napraviti čuveni "Loading..." efekt (poput Gmaila). u kom trenutku prikazati taj DIV, a kad ga ukloniti? na koje događaje da obratim pažnju? hvala!

[ Br@nkoR @ 10.03.2006. 07:56 ] @

U neki elemenat(npr. div) staviš tekst "loading" i menjaš mu css osobunu dislay (block/none) ili visibility (visible/hidden), ukoliko želiš da imaš i efekat kao da se taj elemenat uvećava, u određenim intervalima menjaj width elementa. Elemenat prikazuj kada korisnik klikne na neku akciju, a ukloni ga kada se ta akcija završi, možeš dodati i npr. da se po završetku akcije promeni tekst u elementu (označi da je akcija završena) i/ili promeni boja elementa i pritom možeš napraviti malu pauzu u uklanjanju elementa, zatim možeš napraviti i signaliziranje greške...

Jednostavnije možeš napraviti neku sliku (animaciju) i njoj menjati display ili visibility osobine.

[ sojic @ 10.03.2006. 11:42 ] @

Ja sam video na nekim mestima, dok pise loading, sadrzaj ispod se ne moze selektovati.

Koja je teorija?

[ Br@nkoR @ 10.03.2006. 13:10 ] @

Nisam ima prilike da vidim to, ali verovatno koriste nešto kao one skripte za zabranu selektovanja teksta:

Code:

<body onselectstart="return false;" onmousedown="return false;" ...

Ja sam uglavnom radio ukoliko je forma u pitanju da disable-ujem je (u toku izvršenja neke akcije).

_{[Ovu poruku je menjao Br@nkoR dana 10.03.2006. u 14:11 GMT+1]}

[ lukeguy @ 10.03.2006. 14:38 ] @

okej, to mi je jasno što se tiče animiranja DIV elementa na stranici preko JS-a. ono što i dalje ne razumem je na koju konkretno akciju treba da obratim pažnju?

konkretno, želim da pomoću XML HTTP Request objekta dobijem neke podatke iz baze na osnovu kojih će javascript dinamički generisati neke DIV elemente, a da "Loading..." stoji od trenutka kad krene refresh tog dela stranica, pa sve dok elementi ne budu prikazani. pretpostavljam da se DIV prikazuje u trenutku klika na "refresh", ali kada nestaje? koji događaj signalizira da je učitavanje gotovo i da su elementi prikazani? ako sakrijem DIV na kraju JS sekcije (poslednja linija tog bloka u skriptu), da li to garantuje i da je browser u tom trenutku završio sa iscrtavanjem stranice, tj. da su svi elemenit prikazani kako valja i na svom mestu? (nešto poput onload događaja za window...)

_{[Ovu poruku je menjao lukeguy dana 10.03.2006. u 15:40 GMT+1]}

[ Br@nkoR @ 10.03.2006. 17:45 ] @

OK, ajde ovako, ne znam kako ti izgleda kod, ali..
Imaš tvoj div:

Code:

<div id="loadingBar" style="display: none">loading...</div>

Korisnik klikne na neki link(buttom) i pritom poziva određenu js funkciju u toj funkciji ti kreiraš XMLHttpRequest objekat. Pre nego što se objekat kreira (može i posle) ti promeniš display osobinu div-a loading bar:

Code:

function blaBla() {
  document.getElementByid('loadingBar').style.display = 'block';
  var req = new XMLHttpRequest();  // + za IE
  ...
}

Da bi se znalo da li je izvršen zahtev koisti se readyState, kada se objekat kreira njegova vrednost je 0, kada se pozove "open" on je 1, a kada se izvrši zahtev on je 4, dakle potrebno je da posmatraš kada je on ima vrednost 4.

Code:

...
if (req.readyState == 4) {
// prikaži sadržaj
// ukloni loadingBar
}
...

A pomoću onreadystatechange možeš kreirati povratnu funkciju, odnosno funkciju koja će biti pozvana kada se zahtev izvrši:

Code:

...
req.onreadystatechange = showContent;
...
function showContent() {
// prikaži sadržaj
// ukloni loadingBar
}

Gore sam zaboravio, možeš proveravati i status servera.

Code:
req.status

Ukoliko sve uspešno, vratiće 200, ukoliko stranica, koju si pozvao, ne postoji vratiće 404...

Pogledaj npr. primer koji sam postavio u ovoj temi:
http://www.elitesecurity.org/tema/154633

Citat:

ako sakrijem DIV na kraju JS sekcije (poslednja linija tog bloka u skriptu)

Uglavnom sam ovo koristio što sam i gore objasnio.

Citat:

da li to garantuje i da je browser u tom trenutku završio sa iscrtavanjem stranice, tj. da su svi elemenit prikazani kako valja i na svom mestu?

Hmm... pošto ti je to bitno, ti možeš ispitivati pomoću js da li postoje ti elementi i da li sadrže podatke dobijene pomoću XMLHttpRequest-a

[ lukeguy @ 10.03.2006. 18:13 ] @

Citat:

Br@nkoR: Hmm... pošto ti je to bitno, ti možeš ispitivati pomoću js da li postoje ti elementi i da li sadrže podatke dobijene pomoću XMLHttpRequest-a

hvala ti na odgovoru! ovo gore mi je u stvari ključno. sa XML HTTP Request-om sam radio, tako da znam mehanizme provere koje si naveo. fora je u tome što XMLHTTP brzo završi svoj posao, a onda ide složeniji JS kod koji formira DIV elemente, formatira ih, popunjava i na kraju prikazuje. tek u tom trenutku želim da nestane "Loading...", tako da ću na kraju skripta samo skloniti DIV.

ovo je offtopic: zanima me zbog čega si stavio display: none/block? ja koristim visibility: hidden/visible. razlika u standardima?

[ Br@nkoR @ 10.03.2006. 19:44 ] @

Citat:

lukeguy: ovo je offtopic: zanima me zbog čega si stavio display: none/block? ja koristim visibility: hidden/visible. razlika u standardima?

Češće koristim display, pa sam zato i napisao.

[ lukeguy @ 10.03.2006. 22:03 ] @

okej, hvala ti! mislim da si me uputio na pravu stranu. :)

[ deZio @ 05.04.2008. 13:52 ] @

Da ne otvaram novu temu, zeleo bih da ubacim ovaj efekat loading u moju stranicu. Odradio bih to sam da sam skontao kako ali ne snalazim se bas najbolje u Ajaxu. Skinuo sam skriptu i namestio je da mi klikom na link u tabeli u prvom td-u prikazuje neku stranicu u drugom td-u.

Kod u tabeli(u prvom td-u je link a u drugom zeljena stranica koja se prikazuje kad se klikne na link):

Code:

.....
<tr>
<td>
<a href="javascript:ajaxpage('ajaxfiles/del-nero.php', 'desnakolona'); loadobjs('ajaxfiles/css.css')"><font size="2" color="#006ab1" face="verdana, arial, sans-serif" onmouseover="this.style.color='skyblue'" onmouseout="this.style.color='#006ab1'">LINK</font></a>
</td>
<td id="desnakolona"></td>
</tr>

Evo js koda:

Code:

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

Ocigledno gde je ovo u js:

Code:

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

treba da dodam to za loading.gif. Kad se pojavljuje i kad nestaje.

[ kazil @ 05.04.2008. 14:19 ] @

bas tamo treba dodati:

a on ce vec sam odrediti taj trenutak kada treba da se promeni sadrzaj, na osnovu svog readyState-a i page status-a.

[ deZio @ 05.04.2008. 14:55 ] @

Radi! Hvala ti puno!