Sunday, August 23, 2009

Loading the background image first

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:
view plaincopy to clipboardprint?
  1. <script type="text/javascript">

  3. </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:

view plaincopy to clipboardprint?
  1. <script type="text/javascript">
  2. ImageA = new Image(width,height)
  3. ImageA.src = "URL of Image"
  4. </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:

view plaincopy to clipboardprint?
  1. <script type="text/javascript">

  3. ImageA = new Image(100,100)
  4. ImageA.src = "http://help-developer.com/imageA.jpg"

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

  9. ImageC = new Image(100,100)
  10. 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.

Blogged with the Flock Browser
Posted by CG-Designer at 2:15 AM
Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)