Preloading background image in display: none objects

Blake · #1 22-Feb-2007, 15:58

I have the following in the stylesheet for my website:

CSS Code:

#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?

Code:


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

Corey Bryant · #2 24-Feb-2007, 10:48

It should load since it is in the CSS - whether or not it is displayed. There are a number of people that use something like this to pre-load some images instead of JavaScript.

hollis3162 · #3 01-Mar-2007, 02:45

Be careful when you do this if you use a lot of a lot of background images and you've only got one style sheet that's used across the entirety of your site. The first page a visitor arrives at will then load up every image.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to create or display an image	Unit1	C Programming Language	1	27-Sep-2006 03:18
need help with a console menu system	BullBuchanan	C++ Forum	6	20-Aug-2006 15:46
lining seamless background up with image in dreamweaver? (pls hlp)	sanspolanco	Web Design Forum	2	24-Aug-2005 21:17
GIM gidedit - a fltk fluid resize project	cable_guy_67	FLTK Forum	2	01-Jun-2005 16:00
Checking source codes of image, audio and video files	onauc	C Programming Language	5	26-Feb-2005 22:47

Preloading background image in display: none objects

Re: Preloading background image in display: none objects

Re: Preloading background image in display: none objects