Preloading Images

THREE WAYS TO PRELOAD IMAGES

You have a few options when it comes to preloading your images:

OPTION 1: PRELOAD THE IMAGES WITH JAVASCRIPT - THE OLD WAY.

For example:

    
<script type="text/javascript" language="JavaScript">
    
companyLogo = new Image();
    
companyLogo.src = "logo.gif";
    
</script>

These two lines of JavaScript will load the image 'logo.gif' into the browsers’ memory. Once in memory, the image will display almost instantly. This was the old way of preloading images for rollover effects.

For each image you want to preload, you will need to have the two lines of JavaScript (as seen in the example above) where you name the image you want to preloaded.

This technique works fine and programs like Fireworks (made by Macromedia), which creates rollovers automatically, uses JavaScript just like this to preload images for smooth rollover action.

:)

The problem is that for this to work, the browser must have JavaScript turned on and the browser has to also support JavaScript.

These days, all browsers support JavaScript, but 10% of the people out there (on the Web) have it turned off because they are 'nervous Nellies' - fear of demons and pop-up windows cause them to turn JavaScript off and thus making our lives more difficult as web nerds …

That's why crucial functionality (like site menus,) that depends on JavaScript should not be used – otherwise you are asking for trouble. Ah, but I digress ...

OPTION 2: USE A LITTLE CSS BABY!

You can use CSS to hide your images that you want to preload. Ok this is how it works:

You know that the browser loads stuff in your page from the top down - so stuff appearing at the top of the page will load (into memory) before stuff appearing on the bottom of the page.

With that in mind, all you have to do to get fast rollovers is to load your rollover images at the top of the page. Now the problem is that you don't want people to see the images yet, so to hide them, all you have to do is stick them inside a hidden div:

Needless to say, you would stick this div near the top of your page.

Since we are doing this to only load the image into the browser's memory, the alt tags are not required, but the height and width attributes can help a little with speed.

OPTION 3: ANOTHER OLD TRICK: STICK THE IMAGES IN A HIDDEN FRAME.

A hidden frame is just a frame window set to 0%. But since you should not be using frames, this is not a viable option.

But you could do the same with an iframe and CSS, but why would you when you can just do it with a hidden div.

This I think can be the basis to a new article ... thanks!

Top

© 1996 -
Fatal error: Uncaught Error: Undefined constant "Y" in /home/killersi/public_html/articles_2005/techniques/preload-images.php:123 Stack trace: #0 {main} thrown in /home/killersi/public_html/articles_2005/techniques/preload-images.php on line 123