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.