JavaScript and Images

When you have JavaScript that you expect to interact with images then there is an additional issue that you may need to consider that doesn't apply when you are dealing with just text. While the text loads with the HTML and so with the JavaScript attached to the bottom of the page you know all of the text has loaded by the time the script runs. The images load independently of the HTML and script and so depending on how many of them there are and how big they are they may or may not have loaded by the time your script starts to run.

In most cases it doesn't really matter whether the image has actually loaded or not when the script starts as the images can simply be substituted into their appropriate spot once they have loaded. In a few rare cases (such as when the script is going to insert a substitute image for any that fail to load) you would delay running the script until everything in the page finishes loading and then trigger the script using a load event listener.

In most cases it is preferable to start running the script without waiting for all the images to load as many of the images will not be involved in the script at all. There will also be many scripts where the script will function correctly whether the images the script is supposed to be interacting with have successfully loaded or not.

The one case where images not having loaded may impact on the functioning of a script that doesn't need to wait for all images to load is where the script uses the size of the image as a part of its calculations. For a script that does this to work properly it needs to know the width and or height of the images that it is supposed to be using. If the image has loaded then the script can determine the width and height of the image directly from the space it takes up in the page. If the image hasn't loaded then the script would be provided with the default width and height that is being reserved in the page layout for the image. The solution to this particular problem is obvious - particularly since it is something you will want to do to stop the page reflowing each time an image finishes loading - you simply specify the width and height correctly on each image tag (or if they are going to be all the same size images then specify it in the CSS).

With the correct space reserved in the page for the images then the JavaScript that you want to interact with those images will be able to perform any necessary processing that involves the space in the page the image uses regardless of whether the image has actually finished loading or not.

As an example of what can happen if you don't set the image sizes correctly and the script starts running before the images have loaded consider my marquee script. If the marquee is to contain images then the width of those images needs to be known in order to work out the width of one copy of the marquee content when placed all on the one line. Some browsers only reserve a minimal space for images where no width and height is specified which will then be expanded (and the rest of the content reflowed) once the image has loaded. In these browsers this can result in a lower value being calculated for the width of the marquee content resulting in the next iteration of the content overlapping the end of the prior iteration. Other browsers may make the space big enough to contain whatever alt text that you have provided for if the image doesn't load. This may be significantly larger than the space actually required by the image resulting in the marquee width being calculated as a larger figure and hence once the images load resulting in a gap between the end of one iteration of the marquee and the start of the next.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow