Question

I am using javascript to preload several images with the following code:

// do the following for each image where 'this' is the path
(new Image()).src = this;

This works fine – in firebug I can see each image download being fired off after each iteration.

My problem is that I want to block until the actual download is complete. In other words, I want to show a “image downloading” dialog to the user until all the images have finished downloading.

Right now if I simply show the dialog before the preload loop is executed (and remove the dialog after the loop is completed) it simply captures the download requests NOT the actual download completes.

Since it seems that the actual downloading is asynchronous, is there any way to block until all the downloads have completed?

Answer 1

You can use the onload method which is fired when image is successfully downloaded, then set your next step in the onload function.

Here’s the W3 school’s reference:

http://www.w3schools.com/jsref/event_img_onload.asp