Alright, you web devs out there. If you've ever used javascript-based mouse over effects, you usually want to preload the "moused over" images.
If you want an example, go to http://www.allcapnet.com and mouse over the buttons that are in place for a menu bar. When you mouse over the button javascript says "Hey, somebody just put their mouse over this button, so now I'm gonna swap the current button for this new button."
WHY YOU NEED PRELOADING:
It's like if you buy someone a Christmas present. It would be insane to wait to buy the Christmas present until Christmas day when someone asked you "Hey, where's my present?"
No one would actually do this. We all buy the present 1 year/1 month/1 week/1 day early. Then we wrap it and hide it. That is exactly what preloading is. When the page opens, we know there are some images and stuff we'll need later. So using one of the methods below, we get the image early, while the user isn't looking (metaphorically speaking), so that when the user DOES need the image (like a navbar mouseover), we already have the image.
So preloading get the image early and when the user wants to access the picture (aka a navbar mouseover), we don't have to wait while javascript panics and loads the image — because we preloaded the image it is now instantaneously available to the end user.
However, if the image hasn't been preloaded, then the menu will appear to lag because javascript has to load the image, and then perform the swap. But if the image is preloaded, then when javascript performs the swap, it will be instantaneuous to the end user and they won't notice any menu lag.
So here are two methods for preloading images. One uses pure CSS and one uses javascript. Right now I'm using both together and have been pleased with the results.
CSS Method:
#div-preloader{
width: 0px;
height: 0px;
visibility: hidden;
background-image: url(image-mouseover.gif);
background-image: url(image-mouseover2.gif);
}
Then put this html code soomewhere on your site:
EXPLAINED:
This puts an invisible div on your site. But it has the images you need preloaded set as the background. So the browser downloads the images and then they are available for javascript to swap as needed. The second method involves using javascript:
<script type="text/javascript">
function preloader(){//created by Adam at summerbreak.blogspot.com
var imgToPreload = new Image();
imgToPreload.src = "image-mouseover.gif";
}
</script>
You would call this function via a body onload command. Like this:
<body onload="preloader()">
EXPLAINED:
The javascript method creates an image object, and then loads the image. The downside is that not all users support javascript, or have it enabled. Plus the onload command doesn't execute until the rest of the page has loaded. But both essentially do the same thing. Experiment on your own site and find out what works best for you.
Post a Comment