Question

After playing with hidden divs (display:none), I’ve noticed that the browser does not seem to bother downloading any images/flash files that are in that div, until the divs are changed to visible.

The problem with that is, on most users machines, when viewing a hidden div, there seems to be a good couple of seconds in waiting time for the browser to download images or swf files, etc… which == no happy user.

Is there any way to make the browser download the hidden div’s content, while it’s hidden, and not when it’s been set to visible?

In JS or jQuery maybe?

Thanks

Answer 1

Here are some options:

• Start with the DIV visible, then add the hidden style using jQuery after page load, or after the browser has already fetched the images. This will likely happen so quickly no one will even notice the change.
• Position the DIV off screen initially while things load, and fix the dimensions of the DIV (height/width) to be very small so that it doesn’t take up visible space.
• Use jQuery to load the content of the DIV at the same moment you want to make it visible–fetch the images on demand. i.e. $('#yourDivId').html('[html goes here]');
• Use visible:hidden instead of display:none (but beware that it will still occupy space, so this may not work in all situations). You might place a copy of the image at the bottom of the page where layout won’t be affected, but will still be fetched and browser-cached for when you make your other location visible.