RSS
 

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">

</script>

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"
</script>

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 “http://help-developer.com/image.jpg”. 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 = "http://help-developer.com/imageA.jpg"

ImageB = new Image(100,100)
ImageB.src = "http://help-developer.com/imageB.jpg" </script>

ImageC = new Image(100,100)
ImageC.src = "http://help-developer.com/imageC.jpg" </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: , , ,