How to control the load order of images

(The contents of this article have been tested with Internet Explorer 5.5 (and above) and with Netscape 6.2 and later including Mozilla and Firefox.)

When an image is inserted as part of an html file the author has no (easy) control over the order in which the image is loaded. Normally the browser will start to load each image as soon as it encounters it in the html file, and there is no control over the order in which multiple images are loaded.

It is possible to control the load order of images using JavaScript, but it is not an easy task. The following example demonstrates how to load four images consecutively, one after the other, only loading the first image after the remainder of the html document has been loaded:

<html>
<body>
<p>Images:</p>
<img name=image0 onLoad="LoadImage('image1','number1.gif')">
<img name=image1 onLoad="LoadImage('image2','number2.gif')">
<img name=image2 onLoad="LoadImage('image3','number3.gif')">
<img name=image3>
End of document body.
</body>
<script type="text/javascript">
var loadingImage = false;
function LoadImage(imageName,imageFile)
{
  if ((!document.images) || loadingImage) return;
  loadingImage = true;
  if (document.images[imageName].src.indexOf(imageFile)<0)
  {
    document.images[imageName].src = imageFile;
  }
  loadingImage = false;
}
LoadImage('image0','number0.gif');
</script>
</html>

The script used here is slightly different from the one above - the 'Start' button sets the script going and the 'Reset' button clears the images down to allow it to be run again - but otherwise it is the same. As in the script shown above, the images initially are left blank.

How does this script work?

Firstly, no images are loaded until the end of the document is reached. This allows any and all of the text content of the document to load before any images. All the images are defined without an image source (src) being defined for them (this is important - see point 4).
Each image has a unique name, this allows the image to be referenced in the code.
At the end of the file a call to the function 'LoadImage' (which takes the name of the image and the name of the file to load) and this starts the process of image loading.
The images in this example are loaded sequentially (it is the successful loading of each image which is used as the trigger to load the next). So the second image is only loaded once the first image has finished loading and so on. This is accomplished by having an 'onLoad' event handler associated with each image. The onLoad event handler is called by the browser when the image finishes loading (and this is why the initial images are defined without an image source.)

Alternately, if you simply want to delay loading images until after the text content of a file has been loaded but are not concerned about the order in which those images are loaded then the above can be simplified down to:

<html>
<body>
<p>Images:</p>
<img name=image0>
<img name=image1>
<img name=image2>
<img name=image3>
End of document body.
</body>
<script type="text/javascript">
function LoadImage(imageName,imageFile)
{
  if (!document.images) return;
  document.images[imageName].src = imageFile';
}
LoadImage('image4','number4.gif');
LoadImage('image5','number5.gif');
LoadImage('image6','number6.gif');
LoadImage('image7','number7.gif');
</script>
</html>

This script simply kicks off the loading of each image in turn. It is important that the script (specifically the calls to 'LoadImage') is at the end of the file, i.e. after any text content.

To get a true impression of the speed difference between the two scripts it may be desirable to clear your browser cache before clicking the 'Start' button. Otherwise images will be retrieved from your browser's cache and this will be considerably faster than loading them from across the net.

Be aware that these techniques use JavaScript and if a visitor has JavaScript turned off then no images will appear.