js: betöltés alatt loader anim

demo · 2008. Már. 15. (Szo), 01.05

Sziasztok!

Van nekem egy egész sor thumbnail képecském, illetve a hozzá tartozó nagyobbacska kép egy darab htmlbe.
(hogy mér egybe az most nem lényeges)
Szekvenciálisan előbb a nagyobb képek töltődnek le sorban, aztán a kisképek...
Ez ugye míg betölt.. hát eltelik egy kis idő. Ezalatt szeretnék én megbírni egy loader animot.
AS2.0 -ből jöttem, jsbe sajnos nem tudom megfogni az eseményt.

onload tán? az összes thumbnailre? és az utolsót vizsgáljam?
tehát kirakom a loadert egyből, és ha az utolsó thumbnail is onload, akkor leveszem?
Egyébként elemet törölni lehet futásidőben, vagy csak display none?

Köszi

■

HTML, CSS, JavaScript, Ajax

csirip

A téma engem is érdekel.

s_volenszki · 2008. Már. 15. (Szo), 14.07

Mivel én is szeretnék hasonlót, készíteni, illetve van is hasonló szkritptem, de nem tökéletes, ezért erősen kagylózom a fejleményeket!

Az enyém ilyesmi:

Nekem azt kellett megoldani, hogy kliensre lejusson 400-500db 65x65px méretű ikonképecske. A következőket tettem:

- Betöltöm az oldalt képek nélkül.
- AJAX-sza kiolvasom a thumbnail könyvtárban található összes képfájl nevét, és lehurcolom kliensre,
- majd egyesével preload-olom és hozzáfűzöm a konténerhez, miközben egy progressbar jelzi az állapotot

Ez így nagyon jól működik, a probléma az, hogy az előtöltés ellenére a progressbar hamarabb végez, minthogy a képek betöltődnének. Valószínüleg az előtöltés körül van valami bibi!

s_volenszki

A hozzászóláshoz regisztráció és belépés szükséges
új téma

ez a nyerő

rrd · 2008. Már. 15. (Szo), 15.09

Igen, kb ezek a lépések amik szükségesek a dologhoz. Azon meg ne lepődj meg, hogy nem tudsz egy progressbart tökéletesre megalkotni. Ez egyenlőre még se az MS-nek, se a Mac-nek nem sikerült. Szóval szerintem neked se fog :)
Áthidaló megoldásként én egy körkörösen forgó animációt javaslok, ami nem mutatja, hogy hány %-on áll az ügy.

Más kérdés, hogy 500-600 kép között navigálni nem egy leányálom, szóval lehet, hogy érdemesebb lenne szétbontani több fázisra.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

igaz, hogy nem sok keppel

ksgy · 2008. Már. 15. (Szo), 19.54

igaz, hogy nem sok keppel kellett megkuzdenem, de nekem ahogy nezem jol mukodik a dolog, itt

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Igaz.

s_volenszki · 2008. Már. 17. (H), 11.09

Igen valóban igazad van a szétbontással kapcsolatban, azonban egy teljesen egyedi igényről volt szó, ahol is kellenek a képek egyszerre (egy memória fejlesztő játék, amolyan keresd a párját 15x30 raszterban).

Az én állapotjelzőm darabra megy. Kiírja, hogy 0/450 és amikor a js preloadolt egyet, akkor hozzáfűzi a konténerhez (appendChild) majd emeli a számlálót. Az itt jelentkező hiba az, hogy az állapot jelző rég végez, mikor még az utolsó sorokban mozgolódnak a képek.

Bizonyára előfordulhat, hogy a képelőtöltésemmel van a probléma.

Az állapotjelzőtől eltekintve azért had kérdezem meg, ha van egy megfelelően megírt JS imagePreload függvény, annak nem az lenne a célja, hogy létrehozunk egy amolyan imgLoaded "eseményt"?

s_volenszki

A hozzászóláshoz regisztráció és belépés szükséges
új téma

mikor emeled?

ksgy · 2008. Már. 17. (H), 18.30

mikor noveled a szamlalot? az appendchild utan ala natur, vagy az img.onload-jabol?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Rekurzív...

s_volenszki · 2008. Már. 17. (H), 18.42

..mert ha ciklusban csinálom akkor ugye nincs kimenet amíg véget nem ért (js-ben nem ismerek output buffering-et), így az append után emelem a számlálót és azzal hívom meg újra a függvényt.

Az "ala natur"-ból ítélve nem ez lehet a legjobb megoldás?!

s_volenszki

A hozzászóláshoz regisztráció és belépés szükséges
új téma

en valahogy igy gondoltam

ksgy · 2008. Már. 18. (K), 00.00

en valahogy igy gondoltam:

var i=0;
function rekurzivKepbetolto(attrib_i) {
... /* img letrehozasa */
img.onload=function(){
i++;
loadingdiv.innerHTML=i+' kep betoltve a 156-bol';
rekurzivKepbetolto(i);
}
img.src='valami'+attrib_i+'.jpg';
kontenerdiv.appendChild(img);
}


var i=0;
function rekurzivKepbetolto(attrib_i) {
   ... /* img letrehozasa */
   img.onload=function(){
         i++;
         loadingdiv.innerHTML=i+' kep betoltve a 156-bol';
         rekurzivKepbetolto(i);
   }
   img.src='valami'+attrib_i+'.jpg';
   kontenerdiv.appendChild(img);
}

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Hogyan?

Velias9 · 2008. Már. 27. (Cs), 16.48

Valamit nem értek. Ha a 'kontenerdiv.appendChild(img)' sorral hozzáadod egy 'div'-hez, akkor az a kép hogyan kerül a helyére (mármint a DOM-ban)?
Légyszives magyarázd el ezt részletesen!

Köszi!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

nemertem a kerdest :)

ksgy · 2008. Már. 27. (Cs), 17.08

nemertem a kerdest :)
a kontenerdiv pl:

var kontenerdiv=document.getElementById('kontener');


var kontenerdiv=document.getElementById('kontener');

A hozza tartozo html:

...
<div id="kontener"></div>
...


...
<div id="kontener"></div>
...

A generalt DOM az appendChild utan:

...
<div id="kontener">
<img src="valami1.jpg" />
</div>
...


...
<div id="kontener">
     <img src="valami1.jpg" />
</div>
...

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Arra gondoltam

Velias9 · 2008. Már. 27. (Cs), 19.40

..., ha van egy ilyen forráskódod:

...
<div id="valami1">
</div>
<div id="valami2">
</div>
...


...

<div id="valami1">
<!-- ide kéne egy kép -->
</div>
<div id="valami2">
<!-- ide is kéne egy kép -->
</div>

...

, akkor mind a két 'div'-hez külön kell 'appendChild'-del hozzáadni a képet?
Valahogy így?

...
var kontenerdiv = document.getElementById('valami1');
kontenerdiv.appendChild(img1);
var kontenerdiv = document.getElementById('valami2');
kontenerdiv.appendChild(img2);
...


...

var kontenerdiv = document.getElementById('valami1');
kontenerdiv.appendChild(img1);
var kontenerdiv = document.getElementById('valami2');
kontenerdiv.appendChild(img2);

...

Ez így mind OK, de ha pl több száz képet kéne ilyen módon előtölteni, akkor mi van?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

ciklus

ksgy · 2008. Már. 27. (Cs), 23.25

ciklust erre talaltak ki tobbekozt ;)

...
var img=new Array();
// ciklussal img tomb feltolt a kepekkel
for(i=0;i<img.length-1;i++){
document.getElementById('valami'+i).appendChild(img[i]);
}
...


...
var img=new Array();
// ciklussal img tomb feltolt a kepekkel

for(i=0;i<img.length-1;i++){
   document.getElementById('valami'+i).appendChild(img[i]);
}
...

...vagy, ha megnezed a fentebb irt kodot, akkor az rekurziv hivja onmagat, ha egy kep betoltodott, igy nem kell ciklussal bibelodni, hanem a fuggvenyen belul elintezel mindent, es ha kesz, akkor ujrahivod onmagat a kov keppel/kep index-el mint parameter. Ha ciklussal csinalod, akkor ott az lesz a "problema", hogy a kep meg nincs betoltve, de te mar becsatolod a DOM-ba, igy ott egy kep helyorzo jelenik meg, majd ahogy betoltodott a kep, ugy jelenik meg.

szerk add: itt az elotoltes a lenyeg, ha megnezed fentebb, a DOM-ba csatolas mar csak akkor tortenik meg, ha az onload lefutott, tehat ha a kepet a bongeszo letoltotte.

szerk2 add: asszem felfogtam vegul, hogy mi a kerdesed lenyege:

var i=0;
function rekurzivKepbetolto(attrib_i) {
... /* img letrehozasa */
img.onload=function(){
i++;
loadingdiv.innerHTML=i+' kep betoltve a 156-bol';
rekurzivKepbetolto(i);
}
img.src='valami'+attrib_i+'.jpg';
document.getElementById('divAhovaAKepMegy'+attrib_i).appendChild(img); // pl igy, de az attrib_i helyett mas valtozo is megadhato termeszetesen, hogy hova keruljon, ezt mar te tudod, hogy mijen rendszerben vannak a divek es kepek :)
}


var i=0;
function rekurzivKepbetolto(attrib_i) {
   ... /* img letrehozasa */
   img.onload=function(){
         i++;
         loadingdiv.innerHTML=i+' kep betoltve a 156-bol';
         rekurzivKepbetolto(i);
   }
   img.src='valami'+attrib_i+'.jpg';
   document.getElementById('divAhovaAKepMegy'+attrib_i).appendChild(img); // pl igy, de az attrib_i helyett mas valtozo is megadhato termeszetesen, hogy hova keruljon, ezt mar te tudod, hogy mijen rendszerben vannak a divek es kepek :)
}

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Lehet, hogy triviális, de ...

Velias9 · 2008. Már. 28. (P), 14.51

... én sajna nem tudom, hogy hogyan kell létrehozni az img elemet. Valahogy így kell?:

...
var img = document.createElement("img");
...


...

var img = document.createElement("img");

...

Vagy valami más, amire nem gondoltam.

A másik, hogy AJAX-szal hogyan töltök le egy képet? Csak simán kérem a server-től és ennyi? Nem kell semmit trükközni, vagy ilyesmi?

Tudom, hogy problémás vagyok néha és nehéz felfogású, de remélem segítetek. Az eddigi és a további segítségeket is nagyon szépen köszönöm!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

itt

ksgy · 2008. Már. 28. (P), 15.50

akkor kezdd itt, nagyon jol ertheto tutorial, aztan itt weblaboron is van ket nagyon jokis cikk JS-rol, tovabba ajanlott "olvasmanyok" itt (a 2. oszlop leginkabb)
ha ezeken tulvagy, es van tovabbi kerdes, akkor johet :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

ajax, meg dom elem létrehozás

rrd · 2008. Már. 29. (Szo), 15.30

ajax, meg dom elem létrehozás meg ilyesmiket nem igazán egészséges egyszerre tanulni, mert rettentő mód össze fogsz vele kavarodni.
Ha megvagy az alapokkal, akkor nézz szét a WebMánián találsz mindent ami kell :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

script

demo · 2008. Már. 15. (Szo), 16.57

Szia!

És nyilvános ez a script? :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

JavaScript kép előtöltés animáció

fly · 2008. Már. 17. (H), 14.40

Nekem itt működik egy ilyen script, anno a www.delerium.com-on volt az eredeti :)
http://fly.pardey.org/civic/

A hozzászóláshoz regisztráció és belépés szükséges
új téma

köszi

demo · 2008. Már. 22. (Szo), 19.44

... inkább beraktam a loader gifet a képek alá háttérbe.
Azért köszi a segítséget.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés