I have the following problem. I've created a class in whose constructor I'm loading a couple of images and I need to delay the remaining initializations until they are pletely loaded. The code I used is as follows (an excerpt from the constructor):

var self = this;
var imagesToLoad = 4;

var finishInit = function() {
    alert(imagesToLoad);
    imagesToLoad--;
    if (imagesToLoad == 0) {
       // remaining initializations
    }
}

this._prevIcon = new Image();
this._prevIcon.onload = finishInit; 
this._prevIcon.src = "img1.png";
this._nextIcon = new Image();
this._nextIcon.onload = finishInit; 
this._nextIcon.src = "img2.png";
this._pauseIcon = new Image();
this._pauseIcon.onload = finishInit; 
this._pauseIcon.src = "img3.png";
this._playIcon = new Image();
this._playIcon.onload = finishInit; 
this._playIcon.src = "img4.png";

To my surprise, when executed the displayed dialogs read 4,4,4,4 in Firefox 7 and 4,3,2,4 in IE 9. I'm confused becaused I believed that JS is single-threaded and thus one event handler should not interrupt another. Where's the catch (or my mistake)?

Thanks in advance. Best regards, Tomek

I have the following problem. I've created a class in whose constructor I'm loading a couple of images and I need to delay the remaining initializations until they are pletely loaded. The code I used is as follows (an excerpt from the constructor):

var self = this;
var imagesToLoad = 4;

var finishInit = function() {
    alert(imagesToLoad);
    imagesToLoad--;
    if (imagesToLoad == 0) {
       // remaining initializations
    }
}

this._prevIcon = new Image();
this._prevIcon.onload = finishInit; 
this._prevIcon.src = "img1.png";
this._nextIcon = new Image();
this._nextIcon.onload = finishInit; 
this._nextIcon.src = "img2.png";
this._pauseIcon = new Image();
this._pauseIcon.onload = finishInit; 
this._pauseIcon.src = "img3.png";
this._playIcon = new Image();
this._playIcon.onload = finishInit; 
this._playIcon.src = "img4.png";

To my surprise, when executed the displayed dialogs read 4,4,4,4 in Firefox 7 and 4,3,2,4 in IE 9. I'm confused becaused I believed that JS is single-threaded and thus one event handler should not interrupt another. Where's the catch (or my mistake)?

Thanks in advance. Best regards, Tomek

• javascript
• events

• try switching between the lines 'src' and 'onload'. – CamelCamelCamel Commented Nov 4, 2011 at 21:38

1 Answer 1

All JS event handlers are single threaded. One will not start until the previous one finishes. It all works through an event queue. When one event finishes, the JS engine looks to see if there's another event in the queue and, if so, starts execution of that event.

For example, when a timer fires indicating it's time for a timer event, it puts the event in the queue and it the code for that timer event fires when the currently executing JS event is finished and the timer event gets to the top of the queue.

See this post for further discussion of the Javascript event queue.

Images load in the background using native OS networking. Multiple images can be loading at once. .onload() handlers will only fire one at a time, but since images load simultaneously, there is no guarantee of load order in code like you have. Further, alerts can influence the timing because they block execution of javascript, but don't block execution of image loading.

I don't understand either the 4,4,4,4 or the 4,3,2,4 sequence. They both should show 4,3,2,1. You'd have to show us a fully working version of code to know what is causing that. I'd guess that you either have scoping issues with your variables that keep track of the count of there's more going on in your code than you've disclosed in your question.

You can see a working version of this kind of code here: http://jsfiddle/jfriend00/Bq4g3/.