Any reason to preload images w/Javascript.

Forum Moderators: open

Message Too Old, No Replies

Any reason to preload images w/Javascript.

...instead of just setting their display: to "none"?

MichaelBluejay

5:19 am on Nov 24, 2006 (gmt 0)

I'm realizing with the advent of CSS that there's another way to preload images: Stick them all at the very bottom of the page and set their style to "display:'none'".

Is there any reason why preloading with Javascript is preferable? I used to think that was the only way, now I'm thinking it's old school.

vincevincevince

5:29 am on Nov 24, 2006 (gmt 0)

Stick them all at the very bottom of the page and set their style to "display:'none'".

I might be wrong, but last I tried this I noticed that the images weren't loaded unless you quickly change the display to block and then back again...

MichaelBluejay

9:18 am on Nov 24, 2006 (gmt 0)

Okay, I tested it with a 2Mb JPG. Preloads just fine when style is set to display:none. Checked in both Safari and IE6.

<html>
<img src=/images/logo.jpg onmouseover="this.src='test2.jpg'" onmouseout="this.src='/images/logo.jpg'">
<div style="display:none">
<img src=test2.jpg>
</div>
</html>

The reason I applied the style to the DIV rather than directly to the image is that in my application I have a few images to preload.

Unless I'm missing something, this new method is great!

Bernard Marx

9:19 am on Nov 24, 2006 (gmt 0)

VVV is right. Undisplayed images don't load (not sure about visibility: hidden;).

<edit>Oh, Maybe they do then!</edit>

Before the advent of the

Image

object, some designers used to preload images by including 1x1 pixel IMG elements at the bottom of the page.

I think JS is still preferable in most cases -

- There's no need for extra elements in the doc (semantics etc blah)
- It gives you a chance to "corral" your images into variables / arrays for later processing.

[edited by: Bernard_Marx at 9:24 am (utc) on Nov. 24, 2006]

encyclo

1:22 pm on Nov 24, 2006 (gmt 0)

I wouldn't depend on this working in the long-term, and Opera for one does not load images within a block styled as

display:none;

- see this thread:

[webmasterworld.com...]