Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

efekat "Loading..."

[es] :: Javascript i AJAX :: efekat "Loading..."

[ Pregleda: 4113 | Odgovora: 11 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

lukeguy
Novi Sad

Član broj: 46545
Poruke: 470
*.smin.sezampro.yu.



+8 Profil

icon efekat "Loading..."09.03.2006. u 20:59 - pre 219 meseci
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!
 
Odgovor na temu

Br@nkoR
http://localhost

Član broj: 2597
Poruke: 1603

Sajt: localhost


+23 Profil

icon Re: efekat "Loading..."10.03.2006. u 07:56 - pre 219 meseci
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.
Banned - Not available
 
Odgovor na temu

sojic
Dalibor Sojic
Makedonija

Član broj: 7051
Poruke: 796
*.201.214.82.in-addr.arpa.

Sajt: right-sock.net


+1 Profil

icon Re: efekat "Loading..."10.03.2006. u 11:42 - pre 219 meseci
Ja sam video na nekim mestima, dok pise loading, sadrzaj ispod se ne moze selektovati.

Koja je teorija?
routing protocols enable routers to route routed protocols!
 
Odgovor na temu

Br@nkoR
http://localhost

Član broj: 2597
Poruke: 1603

Sajt: localhost


+23 Profil

icon Re: efekat "Loading..."10.03.2006. u 13:10 - pre 219 meseci
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]
Banned - Not available
 
Odgovor na temu

lukeguy
Novi Sad

Član broj: 46545
Poruke: 470
*.smin.sezampro.yu.



+8 Profil

icon Re: efekat "Loading..."10.03.2006. u 14:38 - pre 219 meseci
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]
 
Odgovor na temu

Br@nkoR
http://localhost

Član broj: 2597
Poruke: 1603

Sajt: localhost


+23 Profil

icon Re: efekat "Loading..."10.03.2006. u 17:45 - pre 219 meseci
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
Banned - Not available
 
Odgovor na temu

lukeguy
Novi Sad

Član broj: 46545
Poruke: 470
*.smin.sezampro.yu.



+8 Profil

icon Re: efekat "Loading..."10.03.2006. u 18:13 - pre 219 meseci
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?
 
Odgovor na temu

Br@nkoR
http://localhost

Član broj: 2597
Poruke: 1603

Sajt: localhost


+23 Profil

icon Re: efekat "Loading..."10.03.2006. u 19:44 - pre 219 meseci
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.
Banned - Not available
 
Odgovor na temu

lukeguy
Novi Sad

Član broj: 46545
Poruke: 470
*.smin.sezampro.yu.



+8 Profil

icon Re: efekat "Loading..."10.03.2006. u 22:03 - pre 219 meseci
okej, hvala ti! mislim da si me uputio na pravu stranu. :)
 
Odgovor na temu

deZio
Inđija

Član broj: 150608
Poruke: 345
217.169.221.*



+38 Profil

icon Re: efekat "Loading..."05.04.2008. u 13:52 - pre 194 meseci
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.
 
Odgovor na temu

kazil
Robert Bašić
Full time PHP dev :)
Bačka Topola - Novi Sad

Član broj: 120044
Poruke: 686
*.cable-3.sattrakt.net.

Jabber: robertbasic@elitesecurity.org
ICQ: 446475288
Sajt: robertbasic.com


+2 Profil

icon Re: efekat "Loading..."05.04.2008. u 14:19 - pre 194 meseci
bas tamo treba dodati:

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
else
document.getElementById(containerid).innerHTML= "<img src=\"ajax-loader.gif\" />";
}


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

deZio
Inđija

Član broj: 150608
Poruke: 345
217.169.221.*



+38 Profil

icon Re: efekat "Loading..."05.04.2008. u 14:55 - pre 194 meseci
Radi! Hvala ti puno!
 
Odgovor na temu

[es] :: Javascript i AJAX :: efekat "Loading..."

[ Pregleda: 4113 | Odgovora: 11 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.