Comments on: Preloading images.

Question: Preloading images.

hcastro — Tue, 14 Nov 2006 08:00:29 -0800

How to wait until images being preloaded by JavaScript Image objects are complete?

I have X number of thumbnails and I would like to wait until they are all loaded in full before I make the page visible. Each JavaScript Image object comes with a imgObj.complete boolean which becomes true when the entire image is loaded. I cannot simply put this in a while loop and wait because JavaScript is single-threaded. The image objects also come with an onload event that is supposed to be triggered when the entire image has been loaded, however this is not the case. Often the event is triggered without the entire image being loaded. Solutions to this problem are graciously welcome. Thank you.

By: IshmaelGraves

IshmaelGraves — Tue, 14 Nov 2006 08:17:36 -0800

I cannot simply put this in a while loop and wait because JavaScript is single-threaded.

Well, you could use setTimeout to check asynchronously whether the image is loaded every half-second or so. But that's kind of a hack.

The image objects also come with an onload event that is supposed to be triggered when the entire image has been loaded, however this is not the case.

The onload event on images has worked for me. What do you mean by "loaded," and on which browsers is it not performing as expected?

By: rajbot

rajbot — Tue, 14 Nov 2006 09:01:59 -0800

yeah, I would use the onload event. This isn't great code, but might work for you:



var i;

var imgArray=new Array();

var numLoaded=0;



for (i=0;i<X;i++) {

     imgArray[i] = new Image();

     imgArray[i].onload = function() {

          numLoaded++;

          if(numLoaded==X) {

               doNextTask();

          }

     }

     img.='http://example.com/'+X+'.jpg';

}

By: hcastro

hcastro — Tue, 14 Nov 2006 10:39:05 -0800

Well it seems that the .onload event works fine in Firefox & Internet Explorer. I must have been implementing it wrong before. I appreciate your help.