Oldal: 1 / 2 12 UtolsóUtolsó
Eredmény: 1 - 10 (12) összesen

Téma: JavaScript image loader

  1. #1
    Új tag
    Csatlakozott
    08-10-19
    Hozzászólás
    14
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás JavaScript image loader

    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>




  2. #2
    Sakkbetyár
    Csatlakozott
    08-09-28
    Hozzászólás
    564
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: JavaScript image loader

    É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+")\"";
    } 
    }




  3. #3
    Új tag
    Csatlakozott
    08-10-19
    Hozzászólás
    14
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: JavaScript image loader

    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...



  4. #4
    kow
    kow nem elérhető
    KowDerMei$ter kow logója
    Csatlakozott
    07-05-09
    Hely
    Budapest
    Hozzászólás
    1.447
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: JavaScript image loader

    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.



  5. #5
    Tag timewriter logója
    Csatlakozott
    08-09-15
    Hozzászólás
    84
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: JavaScript image loader

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



  6. #6
    Új tag
    Csatlakozott
    08-10-19
    Hozzászólás
    14
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: JavaScript image loader

    Idézet timewriter eredeti hozzászólása Hozzászólás megtekintése
    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.



  7. #7
    nimda AlBrown logója
    Csatlakozott
    07-06-15
    Hely
    Budapest
    Hozzászólás
    405
    Begyűjtött 9 köszönetet
    6 hozzászólásával

    Alapbeállítás re: JavaScript image loader

    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>




  8. #8
    Új tag
    Csatlakozott
    08-10-19
    Hozzászólás
    14
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: JavaScript image loader

    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.



  9. #9
    nimda AlBrown logója
    Csatlakozott
    07-06-15
    Hely
    Budapest
    Hozzászólás
    405
    Begyűjtött 9 köszönetet
    6 hozzászólásával

    Alapbeállítás re: JavaScript image loader

    akkor sorry azt gondoltam, hogy az onLoad azt jelenti.
    innen gondoltam: http://www.w3schools.com/jsref/jsref_onload.asp



  10. #10
    kow
    kow nem elérhető
    KowDerMei$ter kow logója
    Csatlakozott
    07-05-09
    Hely
    Budapest
    Hozzászólás
    1.447
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: JavaScript image loader


Oldal: 1 / 2 12 UtolsóUtolsó

A téma címkéi:

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •