Does a hidden CSS class still download an image?

Question

I am building a Modal window/overlay with CSS and Javascript for an email subscription form.

My plan is to Show the Modal when a visitor comes to a website and does not have a cookie set. I then set that cookie when they submit the form or click the close button I have on the Modal window. So on repeat visits if the cookie is there they will not have to see it.

The Modal windows has a background image that is around 75kb so I am trying to come up with the best solution to avoid users loading this image if there cookie is set (I realize it will likely be cached by tis stage)

So my question, in a CSS file for a class/id that has a Background image set, if that class/id has a property set to be hidden display: none; will it still download the image?

Answer 1

To directly answer your question, yes it will, at least for Chrome (might vary between browsers).

I tested using jsfiddle and looking at the network tab

http://jsfiddle.net/ytdun/4/

HTML:

<div id="test"><img src="http://images.google.com/images/nav_logo107.png"></img></div>​

CSS:

#test { display:none }

Answer 2

to be sure that the image is downloaded.

what about if use

visibility:hidden;

and temporarily resize the element to 0x0.....

and when the element is now needed...

set again the visibility to

visibility:visible;

and then resize it to its true size...

using the visibility property...
it's like hiding on a invisibility cloak...
but's you're still there and not vanished...

or preload it using javascript

if (document.images){  
preload_image_object = new Image();  
image_url = new Array();  
image_url[2] = "image.jpg";  
image_url[3] = "imag2.jpg";  
var i = 0;for(i=0; i<=3; i++)  
preload_image_object.src = image_url[i];  
}