Important notice

Please note that this blog is discontinued here. All the posts are also coppied to my new blog at
Important: Due to large amount of comment spam further commenting has been disabled here. If you wish to send me a comment, plase look up the same post on my new blog and leave comment there. Thanks!


The quick way to preload images

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: { background: transparent url('menu_off.gif') no-repeat left top } { 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 <body> tag the following code

<div style="display:none; visibility:hidden; position:absolute; left: -3000px;">
  <img src="menu_off.gif"/>
  <img src="menu_on.gif"/>

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: ,,

1 comment:

Anonymous said...

The best technique I've found for accomplishing this is to use one image for both the on and off states and change the background-position on hover.