The quick way to preload images

April 7th, 2008 | Categories: JavaScript, SharePoint

If you use background images for hover effects with CSS (for example links hover effects) in IE you don’t get a nice effect, because the "mouseover" image is always loading, creating a "gap". So it’s good to have the "mouseover" images preloaded. There are numerous of ways to preload images, but usually what I’m doing is loading those images in a hidden layer. For example: if you have a css:

a.menu { background: transparent url(‘menu_off.gif’) no-repeat left top }
a.menu:hover { background-image: url(‘menu_on.gif’) }

you’ll want to have the images menu_off.gif and menu_on.gif preloaded. The way I’m doing it is by adding to the top of my webpage right after the tag the following code


 
 

This will put the two images loaded in a hidden layer and thus keeping them preloaded. And because this layer is right at the beginning of the page, you’ll have the images preloaded first. 

Oznake ponudnika Technorati: ,,