I need to load an array of images in Javascript, but I want to make sure that all the images are loaded before starting drawing them. So, I busy-wait for every image onLoad event to be called. First I create images and set their source and onload function:

// Load images from names
for (i = 0; i < this.nImages; i++) {
    this.imagesArray[i] = new Image();
    this.imagesArray[i].onload = this.onLoad(i);
    this.imagesArray[i].src = images[i];
}

This is the onLoad function, member of the class I'm developing (the first two steps were in the constructor):

MyClass.prototype.onLoad = function (nimage) {
    console.log ("Image pleted? ", nimage, " ", this.imagesArray[nimage]plete);
    this.imagesLoaded++;

}

Then I busy wait for all the onLoad functions to increment the counter (again, in the constructor):

while (this.imagesLoaded < this.nImages) {
    // This is busy wait, and I don't like it.
    continue;
}

So far, so good. But when I try to draw it on an HTMl5 canvas with my drawClass:

MyClass.prototype.refresh = function () {

    // Gets one of the images in the range    
    var imageNum = this.GetImageNum();

    // Test for pleteness. This gives FALSE :(
    console.log ("pleteness for image number ", imageNum, " is: ", this.imagesArray[imageNum]plete);

    this.drawClass.draw(this.imagesArray[imageNum], this.xOrigin, this.yOrigin);
}

The console.log line gives false and I get the infamous NS_ERROR_NOT_AVAILABLE exception.

Please not that the refresh() function is called after the onLoad() function, according to Firebug.

What am I missing here?

I need to load an array of images in Javascript, but I want to make sure that all the images are loaded before starting drawing them. So, I busy-wait for every image onLoad event to be called. First I create images and set their source and onload function:

// Load images from names
for (i = 0; i < this.nImages; i++) {
    this.imagesArray[i] = new Image();
    this.imagesArray[i].onload = this.onLoad(i);
    this.imagesArray[i].src = images[i];
}

This is the onLoad function, member of the class I'm developing (the first two steps were in the constructor):

MyClass.prototype.onLoad = function (nimage) {
    console.log ("Image pleted? ", nimage, " ", this.imagesArray[nimage].plete);
    this.imagesLoaded++;

}

Then I busy wait for all the onLoad functions to increment the counter (again, in the constructor):

while (this.imagesLoaded < this.nImages) {
    // This is busy wait, and I don't like it.
    continue;
}

So far, so good. But when I try to draw it on an HTMl5 canvas with my drawClass:

MyClass.prototype.refresh = function () {

    // Gets one of the images in the range    
    var imageNum = this.GetImageNum();

    // Test for pleteness. This gives FALSE :(
    console.log ("pleteness for image number ", imageNum, " is: ", this.imagesArray[imageNum].plete);

    this.drawClass.draw(this.imagesArray[imageNum], this.xOrigin, this.yOrigin);
}

The console.log line gives false and I get the infamous NS_ERROR_NOT_AVAILABLE exception.

Please not that the refresh() function is called after the onLoad() function, according to Firebug.

What am I missing here?

• javascript
• image
• canvas
• dom-events

1 Answer 1

You need to assign onload before setting the source, otherwise the loading may be pleted before the script gets to set the handler. Maybe that already fixes it.

Re the busy waiting, that is indeed never a good thing. It's hard to suggest alternatives, as you are not showing why you need to wait in the first place. But what might be a good idea is extending the onload handler to detect whether the image array is plete, and if it is, to start the following action - that would make the busy waiting unnecessary.