Loading the background image first

03 Sep

When loading images on a website the background image could be the last to load which doesn’t look too professional. In this very short tutorial (more a tip I suppose) I will show you how to load the background image before anything else, you can apply this to any image that you wish, it is achieved by a bit of javascript in the head section.

In between the <head> and </head> tags of your html file, add the script tags:

<script type="text/javascript">


It is worth mentioning that this wont work in browsers without javascript enabled, but the majority do so there shouldn’t be any real problems. If a browser doesn’t have javascript then it will continue to load as normal.

Now add the following code in between the script tags like this:

<script type="text/javascript">
ImageA = new Image(width,height)
ImageA.src = "URL of Image"

Replace the (width,height) with the dimensions of your image, eg (100,100) and the “URL of Image” to the URL of the image eg “”. Now it should load before all other images on the page.

To add more than one image you can do something like this:

<script type="text/javascript">

ImageA = new Image(100,100)
ImageA.src = ""

ImageB = new Image(100,100)
ImageB.src = "" </script>

ImageC = new Image(100,100)
ImageC.src = "" </script>

There you have it, how to load an image first, this works because javascript (and the content between the <head> and </head> tags) is loaded in the browser before the content, hence before any other images or CSS styles.

Comments Off on Loading the background image first

Posted in Uncategorized


Tags: , , ,