preloader für x bilder

[szylla]

hallo,

und wieder eine frage bei der ich nicht weiterkommen
ich möchte initial ein paar bilder vorladen. erst wenn diese bilder geladen sind soll es im script weitergehen. ich hab ein paar beispiele geunfden, aber es will einfach nicht funktionieren. hat hier jemand eine idee?

var images = new Array( "img/page1.png", "img/page2.png", "img/page3.png", "img/page4.png", "img/page5.png", "img/page6.png", "img/page7.png", "img/page8.png", "img/page9.png", "img/page10.png", "img/page11.png", "img/page12.png", "img/page13.png", "img/page14.png", "img/page15.png", "img/page16.png" );

function preload() {

    var image = new Image();
    image.onLoad = function() {

        trace( "DONE" );

   }

    var a = -1;
    var b = images.length - 1;

    while ( a++ < b ) {

        //trace( a + " - " + b );
        trace( images[ a ] );

        image.src = images[ a ];

    }

}

das trace ist bei mir nix anderes als ein simples alert. das trace "trace( images[ a ] )" klappt auch, aber nicht das im onLoad handler. das will einfach nicht.

ich dachte mir ich zähl dann einfach im onload handler eine variable hoch und vergleich dann mit der länge des arrays. stimmen beide werte überrein müssen ja alle bilder geladen sein und ich könnte eine function aufrufen.

aber es klappt wie gesagt nicht und ich weiß nicht wieso

vielen dank für eure hilfe und vg,
szylla

[Martin Kraft]

Du lädst die Bilder ja in einer Schleife immer mit derselben Image-Instanz. Ich kann mir gut vorstellen, dass der Browser deshalb einfach nur den letzten Ladeprozess ausführt....

[szylla]

hatte ich auch schon überlegt. hab das wie gesagt so als bsp gesehen... nur halt ohne das onLoad. und das onLoad wird nicht ein einziges mal aufgerufen

[szylla]

irgendwas läuft aber grad auch komplett schief. nicht einmal das hier klappt:

var image = new Image();
    image.onLoad = function() {

        trace( "DONE" );

    }
    image.src = "img/page1.png";

dabei stimmt der bildpfad in jedem fall

[thomas_E]

tja, eines der Probleme wenn alles dynamische Objekte sind => keine (vernünftigen) Fehlermeldungen

onLoad != onload

nur im FF getestet, erfahrungsgemäs, sollten Opera, Safari und Chrome darin übereinstimmer, nur beim IE bin ich unsicher.

//noch etwas Code zum spielen

PHP-Code:

function preloadLinear(images, onComplete){
    var todo = images.slice();    //create a copy
    function loadNext(){
        var url = todo.shift();
        if(url) 
            img.src = url;
        else if(onComplete && onComplete instanceof Function) 
            onComplete();
    }
    
    var img = new Image();
        img.onload = loadNext;
    loadNext();        
}

function preloadParalell(images, onComplete){
    function imgLoaded(){
        if(--numLoading == 0 && onComplete && onComplete instanceof Function)
            onComplete();
    }
    
    for(var i=0, len=images.length, numLoading = 0; i<len; ++i, ++numLoading){
        var img = new Image();
            img.onload = imgLoaded;
            img.src = images[i];
    }
}


preloadLinear([
    //Google doodle of the Day
    "http://www.google.de/logos/2011/Diego_Rivera-2011-hp.jpg",
    "http://www.google.de/logos/2011/Diego_Rivera-2011-hp.jpg",
    "http://www.google.de/logos/2011/Diego_Rivera-2011-hp.jpg"
], function(){ alert("done"); }); 


[szylla]

Zitat von thomas_E

onLoad != onload

ich schnall ab. das wars. oh man, ich hasse JS.

vielen dank thomas!

[szylla]

noch eine kleine frage... übrigens coole preloader varianten thomas!

wenn das laden beendet ist und ich eine function aufrufe.
und ich zu einem späteren zeitpunkt dann meine bilder brauche. push ich das this im onLoad handler dann in ein array und greiß dann später darauf zu, also so in etwa:

img.onload = function() {

   imageHolder.push( this );
   //...

,oder ist das quatsch. weil sich hier ja dann auch das problem ergeben könnte das bild1 vor bild234234 geladen worden ist und somit die reihenfolge im im array imageHolder jedes mal eine andere ist.
edit: ich muss halt sicher stellen das dann in diesem holder array bei index 0 bild 1 kommt, bei index 1 bild 2 usw usw...

oder kann ich dann später einfach egal welches image von denen die gepreloaded worden sind über:

var img1 = new Image();
img1.onload = function() {

ctx.drawImage( this, 0, 0 );

}
img.src = "dsfsdfsf.png"

zeichnen? das onload müsste ja sofort kommen weil das bild ja zuvor schon geladen worden ist?

bitte um aufklärung.
vielen dank und grüße,
szylla

[thomas_E]

ganz so einfach ist das nicht, bei der linearen Variante ist die Reiehenfolge zwar immer korrekt, aber es wird (bisher) auch immer das selbe Image-Objekt verwendet, um die Bilder vorzuladen.
bei der paralellen Variante ist die Reiehnfolge der geladenen Bilder nicht vorhersehbar.

das onload müsste ja sofort kommen weil das bild ja zuvor schon geladen worden ist?

was heisst für dich "sofort"?
mach mal ein trace in dem paralellen Code, einmal nach der for-schleife, und in der onload-Funktion, dann wirst du sehen, dass die komplette Schleife (und vermutlich noch mehr Code) abgearbeitet wurde, bevor das erste onload-Event gefeuert wird, selbst wenn das Bild direkt aus dem Browsercache kommt und somit ja "sofort" da ist.
da geht es zwar nur um milisekunden (die du nicht merkst), aber für den Code kann das eine Ewigkeit sein.

hier die beiden Codes mit image-array:

PHP-Code:

function preloadLinear(urls, onComplete){
    var images = [], urls = urls.slice();
    function loadNext(){
        var url = urls.shift();
        if(url){
            var img = new Image();
                img.onload = loadNext;
                img.src = url;
            images.push(img);
        }else if(onComplete && onComplete instanceof Function) 
            onComplete(images);
    }
    
    loadNext();
}

function preloadParalell(urls, onComplete){
    var images = [];
    function imgLoaded(){
        if(--numLoading == 0 && onComplete && onComplete instanceof Function)
            onComplete(images);
    }
    for(var i=0, len=urls.length, numLoading = 0; i<len; ++i, ++numLoading){
        var img = new Image();
            img.onload = imgLoaded;
            img.src = urls[i];
        images.push(img);
    }
}

function onImagesLoaded(images){
    var s = "done\n\n";
    for(var i =0; i<images.length; ++i)
        s += "  "+ i +": "+ images[i].src +"\n";
        
    alert(s);
}


preloadLinear([
    //Google doodle of the Day
    "http://www.google.de/logos/2011/Diego_Rivera-2011-hp.jpg#001",
    "http://www.google.de/logos/2011/Diego_Rivera-2011-hp.jpg#002",
    "http://www.google.de/logos/2011/Diego_Rivera-2011-hp.jpg#003"
], onImagesLoaded); 


[szylla]

hi thomas,

hast natürlich recht. das mit sofort war quatsch... das hatte ich nicht ganz bis zu ende gedacht

danke für dein beispiel! schaut sehr vielversprechend aus. ich werds gleich mal antesten.

schönen abend noch!
szylla

edit: funktioniert superb! gekauft.