JavaScript image loader

**hungeri** · 2008-11-11, 16:43

Sziasztok!

Egy konvertáló weblapomat akartam JavaScript alapokra helyezni optimalizálás céljából. A lényeg, hogy van egy php (kep.php), ami a bemenetén fogadott képfájlt megnyitja és bohóckodik vele, majd egy thumbnailt tesz a kimenetre. Ez azt jelenti, hogy <img> -be rakom ezt a php-t. Sok ilyen képet akarok konvertálni, az eddigi megoldás az volt, hogy a PHP feltöltötte a <body>-ba az összes konvertálandó képet a fent leírt <img> tag-ekben, de így a PHP-re zúdítottam az összes képet szinte egy időben, rengeteg párhuzamos futtatást eredményezve, tetű lassúvá téve így a konverziót.

Az új elképzelésem az volt, hogy body onload event-tel meghívok egy JavaScript függvényt, mely "ismeri" a konvertálandó képeket egy <head>-be töltött tömb révén. Szóval a meghívás "0" paraméterrel kezdődik, elsőre a függvény beszúrja a fent említett <img>-t, azonban <img onload="betolt(1)">-ként, azaz egyet léptet, így legközelebb a tömb második elemét szúrja be, ahol már a harmadik elemre mutat az img onload event. Úgy zárom a ciklust, hogy ha a tömb következő értéke üres, akkor a jelenlegi <img> nem kap onload eventet.

Csakhogy az egész végtelen ciklusban végződik, úgy kell kinyírnom a böngészőt! Megpróbáltam, hogy nem a body onload-ba tettem a start függvényt, hanem body alá illesztett script tag-be, de akkor is betöltődik újra és újra, mintha a js által beszúrt IMG már nem is figyelné az onload eventet, hanem folyamatosan lapátolná az előző IMG onload event-jéből származó kérést...

Kezdő vagyok még JS-ben, ezért lehet, hogy nem vagyok tisztában eléggé a függvények és event-ek világával, itt a forrás, ha valaki tud, segítsen!

Köszönöm!

Kód:

<html>
<head>
<script type="text/javascript">
var kepek = new Array;
kepek[0] = "IMG_7057.JPG";
kepek[1] = "IMG_7058.JPG";
kepek[2] = "IMG_7059.JPG";

function betolt(i)
{
 j=i+1;
 if(kepek[j]==undefined) var load=""; else load="onload=\"betolt("+j+")\"";
 var ujelem="<img src=\"kep.php?image="+kepek[i]+"\" alt=\""+kepek[i]+"\" title=\""+kepek[i]+"\" "+load+"/> Ez egy kép.<br/>";
 document.body.innerHTML+=ujelem;
}
</script>

</head>
<body onload="betolt(0)">
</body>
</html>

Hasonló témák:

**Simulacrum** · 2008-11-11, 17:49

Én se vagyok guru, de elvileg függvényből returnal léphetsz ki. Mondjuk a var load="" helyett return esetleg, illetve az if-hez nem kellene zárójelezés?

Mondjuk valahogy így:

Kód:

function betolt(i)
{
 j=i+1;
   var ujelem="<img src=\"kep.php?image="+kepek[i]+"\" alt=\""+kepek[i]+"\" title=\""+kepek[i]+"\" "+load+"/> Ez egy kép.<br/>";
   document.body.innerHTML+=ujelem;

 if(kepek[j]==undefined) {
  return;
 } else {
   load="onload=\"betolt("+j+")\"";
} 
}

**hungeri** · 2008-11-11, 20:13

A zárójelzést illetően szerintem JavaScript ugyanúgy viselkedik, mint C, vagy PHP, azaz egysoros (egy kifejezéses) ágnál elhagyható a {}.

A return-ök jó ötletnek tűntek, de sajnos nem működtek, mondjuk nem lett végtelen ciklus a dologból, ellenkezőleg: betöltötte az első IMG tag-et a BODY-ba, azonban ott képbetöltés nem történt (nem igazán értem, miért), így az onload event sem aktiválódott. Az src-be írt url viszont tökéletesen működik, de ahogy beteszem a document.body.innerHTML+= rész után a return-t, ez történik: nincs képbetöltés. Így az első képnél elakadunk de még az is kép nélkül marad...

**kow** · 2008-11-11, 20:20

Egyszerű:
Létrehozol egy új kép objektumot: var kep = new Image();

Legyen neki forrása: kep.src = "img/lol.jpg"

Majd kerüljön be a DOM-ba valahova: document.getElementById('keptarto').appendChild( kep );

Részletek itt:
http://www.w3schools.com/htmldom/dom_obj_image.asp

A zárójelzést illetően szerintem JavaScript ugyanúgy viselkedik, mint C, vagy PHP, azaz egysoros (egy kifejezéses) ágnál elhagyható a {}.

Igaz, de nagyon átláthatatlan lesz tőle a kód és ha kell egy új sor, akkor magadnak csinálsz plusz munkát.

**timewriter** · 2008-11-11, 20:23

A baj abból ered, hogy amikor hozzáadsz egy új elemet, akkor lefutnak újra az onload események, így végtelen ciklus keletkezik.

**hungeri** · 2008-11-11, 21:57

timewriter eredeti hozzászólása

A baj abból ered, hogy amikor hozzáadsz egy új elemet, akkor lefutnak újra az onload események, így végtelen ciklus keletkezik.

Hasonló tapasztalatokat láttam a futás során, csak nem tudtam volna így megfogalmazni. Erre megoldás?

A hangsúly ugyanis nem csak ott van, hogy a procimat kíméljem és egyszerre csak egy képet konvertáljak, hanem a képek mellé commenteket, képaláírásokat is írok, amik szerkesztése közben e megoldással a többi kép még konvertálódhat. Ezt a pusztán PHP verzió is tudja, hiszen előre legenerált táblázat, fieldset tartalmazta a mezőket, hogy a kép mikor jelenik meg, kvázi mindegy.

**AlBrown** · 2008-11-11, 22:12

Zárójelezés:
egy sornál teljesen mindegy, anno vicces volt, mert a C fordító ez alapján kezelte a stacket, de szintaktikailag rendben

Végtelen ciklus:
jelen esetben nem para, hiszen feltételhez volt kötve, hogy lesz-e megint onload

és a akkor kow javaslata alapján:

Kód:

<html>
<head>
<script type="text/javascript">
var kepek = new Array;
kepek[0] = "IMG_7057.JPG";
kepek[1] = "IMG_7058.JPG";
kepek[2] = "IMG_7059.JPG";

function betolt(i) {
	if(kepek[i]!=undefined) {
		var kep = new Image();
		kep.src = kepek[i];
		kep.onLoad=betolt(i+1);
		document.getElementById('keptarto').appendChild( kep );
	}
}

</script>

</head>
<body onLoad="betolt(0)">
<div id="keptarto">
</div>
</body>
</html>

**hungeri** · 2008-11-11, 22:23

Ez nem jó, mert legenerálja az összes kép tag-et azonnal, nem várja meg, míg be is töltődik a kép (így ugyanúgy párhuzamosan fut le a konverzió, mint PHP-s generálás esetén)! Az a kep.onLoad=betolt(i+1); rész nem stimmel szerintem. Csak akkor kéne a (következő) függvényt meghívni, ha az onload event megvolt, azaz a kép _tényleg_ betöltött.