JS Img preload, javascript problem

[Shedvel]

Izgubih previse vremena, i volje.

CODE

Resources =
{
    images:
    {
        blueDiamond: 'img/blue.png',
        redDiamond: 'img/red.png'
    },

    preloadImages: function()
    {
        var images = this.images;

        for (var item in images)
        {
            console.log('before load :'+item, images[item]);
            var image = new Image();
            image.onerror = function(){alert('fail to load : '+ images[item])};
            image.onload = function(){images[item] = image;  console.log('after load :'+item, images[item]);};
            image.src = images[item];
        }
    }
}

Resources.preloadImages() vraca :

before load :name: blueDiamondvalue: img/blue.png
before load :name: redDiamondvalue: img/red.png

after load :name: redDiamondvalue: [object HTMLImageElement]
after load :name: redDiamondvalue: [object HTMLImageElement]

WTF happened to my blueDiamond!

[Br@nkoR]

Item i image promenljive će imati poslednje definisane vrednosti, funkcija definisana na load event će biti izvršena kada se slike učitaju, odnosno posle for petlje, nisam baš vešt u objašnjavanju :(.
Pokušaj da zameniš:

CODE

image.onload = function(){images[item] = image;  console.log('after load :'+item, images[item]);};

sa:

CODE

image.onload = (function(item, image){
              return function() {
                images[item] = image;
                console.log('after load :'+item, images[item]);
              }
            })(item, image);

[Shedvel]

Radi, hvala ti.

Ipak bi mi valjalo objasnjenje ako imas vremena, posto ne razumem tvoj kod posebno deo oko samozivrsavajuce funkcije, dakle :

CODE

a = (function(){})(B)

sta se zaboga desava sa b (a dobija vrednost b nakon sto se selfinvokuje funckija ili ?) i koji je scope ovakvog cuda ?


EDIT

OK mislim da kapiram, b je parametar salefinvoking funckije, a scope je totalno zatvoren, ali zasto return function u tvom kodu, mislim radi i sa :

CODE

image.onload = (function(item, image){

                images[item] = image;
                console.log('after load :'+item, images[item]);

            })(item, image);

Postoji li neki razlog da se vraca funkcija ?

[Shedvel]

U stvari ne radi u koliko ne vraca funkciju....tek mi sad nista nije jasno.

[Br@nkoR]

Onload zahteva funkciju, zato je return function. Možeš da probaš i:

CODE

(function(item, image){
  image.onload = function() {
    images[item] = image;
    console.log('after load :'+item, images[item]);
  }
})(item, image);

Pretraži na temu "javascript closures".

edit: Mada promenljiva image ne mora da se prosleđuje, možeš koristiti this.
Možeš koristiti i npr:

CODE

image.item = item;
image.onload = function() {
  console.log('after load :'+this.item, this);
}

[Shedvel]

Vise mi je bliska ova varijanta sa dodavanjem propretija, tako da se svelo na :

CODE

image.onload = function(){images[this.item] = this}

Closures su pakao dolazeci sa full OO podloge.

Hvala puno za bjasnjenje.

[Shedvel]

Kad smo vec na temi da ne znas neki 'standardan' nacin za ispaljivanje custom evenata u JSu.

Naime valjalo bi mi da uradim nesto tipa.

addEventListener(Resources.prloadImages(), onComplete());



onComplete()
{
//all images loaded
}

gde bih event ispalio unutar preloadImages(), nakon nekakvog checka.


Googlanje izbaci brdo resenja ali mi sva deluju.... pa sklepano, postoji li neki standardni nacin za izvoodjenje ovoga.

[Br@nkoR]

Pogledaj "Observer design pattern"
http://addyosmani.com/resources/essentialj...tternjavascript

[Shedvel]

Hvala za link ODLICAN je.

[Br@nkoR]

Nema na čemu.
Još jedan link sa primerima:
http://shichuan.github.com/javascript-patterns/

Pretraži na temu "javascript closures".

Ovde sam zaboravo da napišem podraži i "javascript function currying" odnosno "javascript partial function application".

[Shedvel]

Hvala jos jednom za link... currying is ....arghhhh... pakleno napredan koncept.

[Shedvel]

Nisam mogao da se savatam sa observerom, ne vredi previse mi je u krvi as event system da bih mogao da se naviknem na observer. Tako da sam sklepao nesto sa pseudo callbackovima... kanda radi ..ne kazem da je dobar...pa ako nekome zatreba:

CODE

Resources =
{
    completed: 0, //holding amount of successfully loaded images
    onImgLoaded: function(){}, // for progress fires when each image is loaded
    onComplete: function(){}, // fires when all images are loaded

    images:
    {
        blueDiamond: 'img/blue.png',
        redDiamond: 'img/red.png'
    },

    imagesCount: function()
    {
        var total = 0;
        for(var image in this.images){total++};
        return total;
    },

    getProgress: function()
    {
        var progress = this.completed/this.imagesCount();
        return progress;

    },

    preloadImages: function()
    {
        var scope = this;
        var images = this.images;
        var total = this.imagesCount();

        for (var name in images)
        {
            var image = new Image();
            image.name = name; //add property name to image object for later use
            image.onerror = function(){alert('fail to load : '+ images[name])};
            image.onload = function()
            {
                images[this.name] = this; //image with this name becomes this(image object)
                scope.completed++;
                scope.onImgLoaded();
                if(scope.completed == total)scope.onComplete(); //when finished loading fire this
            };
            image.src = images[name];
        }
    }
}

Usage - negde u Gamse.js npr.

CODE

    this.init = function()
    {
        var scope = this;
        Resources.onImgLoaded = function(){console.log(Resources.getProgress())}
        Resources.onComplete= function(){scope.setup()};
        Resources.preloadImages();
    }

Pitanje, kako da nateram da mi property onComplete: function(){}, prihvata funckiju ako se prsoledi, dok u suprotnom ne puca nego recimo vrapuje ono sto nije funkcija u funkciju.... nezgrapno nesto poput

onComplete: typeOf(funtion)||function(args){}, //naravno ne radi ali objasnjava clj.

[Br@nkoR]

Nisam siguran da li sam dobro razumeo.
Npr. u Resources dodaj:

CODE

callback: function(){}

za onComplete stavi:

CODE

onComplete: function(fn) {
  this.callback = fn;
}

I unutar preloadImages, unutar onload eventa, zameni:

CODE

if(scope.completed == total) scope.onComplete();

sa:

CODE

if(scope.completed == total) scope.callback();

I posle:

CODE

Resources.onComplete(function() {
  scope.setup();
});

ili samo:

CODE

Resources.onComplete(scope.setup);

Ili ukoliko je potrebno dodavati više funkcija, stavi da je callback niz pa prilikom poziva onComlete dodaj funkcije u taj niz i na kraju prođi kroz niz i pojedinačno izvrši fdodate funkcije;

[Shedvel]

Dobro si razumeo; nekako mi je cudn osecaj da pretrpavam nested funkcijama, ali je to valjda normalno u JSu.
Hvala jos jednom.