Preloading background image in display: none objects

[Blake]

I have the following in the stylesheet for my website:




#projects_menu
{
position: absolute;
left: 98px;
top: 161px;
z-index: 1;
width: 102px;
height: 48px;
font-size: 11px;
overflow: hidden;
border-bottom: 1px solid #165117;
display: none;
background: url("dropdownbg.gif");
}


My question is, will that background image be preloaded, so that it appears instantly when I make the object visible, or do I need to use some javascript to preload it?

If I do need to use javascript to preload it, is this all I need to do?




var dropdownbg = new Image(102, 59); dropdownbg.src = "dropdownbg.gif";


Thanks!

[jscheuer1]

Different browsers may handle that differently but most will load that image ahead of time, I think. Your preload code looks more than sufficient. However, since this is the css forum and css shouldn't be dependant upon javascript if it is avoidable, another way to 'preload' the image would be to have this right after your body tag:


<img style="visibility:hidden;position:absolute;top:-1000px;left:-1000px;" src="dropdownbg.gif">

That will ensure that the image gets cached as the first item on the page. You should also take whatever measures you can (cropping and/or optimization) to make sure that the image requires as few bytes as possible.

[Blake]

Different browsers may handle that differently but most will load that image ahead of time, I think. Your preload code looks more than sufficient. However, since this is the css forum and css shouldn't be dependant upon javascript if it is avoidable, another way to 'preload' the image would be to have this right after your body tag:


<img style="visibility:hidden;position:absolute;top:-1000px;left:-1000px;" src="dropdownbg.gif">

That will ensure that the image gets cached as the first item on the page. You should also take whatever measures you can (cropping and/or optimization) to make sure that the image requires as few bytes as possible.

Great, thanks a lot.