Do Images in Display: none Divs load?

[Zeradin]

Or images that are set to display none?

What I want to do is load images for roll overs before the links are rolled over. I can make it 1x1 visibility hidden, but i'd rather just display none them and make sure they don't interfere with anything.

[haku]

Images in a div set to display none will still load, as will images that have had their own display set to none. This is good for preloading.

[Zeradin]

Thanks. This is great information to know!

[Zeradin]

It doesn't work. Making them visibility hidden and 1x1 also doesn't work. You still have to hover for a second before it loads the first time. What's the hell?

[haku]

Something else must be wrong with your code, as even if they didn't load when you set them to display:none (which I've done tests in the past to confirm that they do), they would definitely load when setting them to have a size of 1x1, since they are visible at that point.

[Zeradin]

Something else must be wrong with your code, as even if they didn't load when you set them to display:none (which I've done tests in the past to confirm that they do), they would definitely load when setting them to have a size of 1x1, since they are visible at that point.

 

Well I mean they aren't visible, they're visibility: hidden. What could possibly be wrong with the code? When I inspect it with firebug they still show up so the link to the image works... I don't get it.

[Zeradin]

<a href="#" id="resume_button"></a>
<div class="preload">
<img src="buttons/sadbbq_button.jpg" alt="saddbbq_button" />
<img src="buttons/facebook_button.jpg" alt="facebook_button" />
<img src="buttons/resume_button.jpg" alt="resume_button" />
</div>

 

a#resume_button:hover {
background: url(buttons/resume_button.jpg) no-repeat;
}
.preload {
display:none;
}

 

Maybe hovers always take a second to load the first time even if the image is already loaded?

[haku]

visibility:hidden isn't the same as display:none. I believe they don't load with visibility:hidden.

 

But, as to your problem at hand, rather than going on in the direction you are going, you should switch to using CSS sprites, which combines both images into one, and just shifts the background position on rollover, guaranteeing that both images are loaded. This will both solve your problem, and increase page loading speeds.

[Zeradin]

This is what I've been looking for. Thank you so much.