0

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

user110857
  • 2,023
  • 1
  • 21
  • 33

3 Answers3

2

Don't use display:none; to hide images.

Try setting the following to hide the content.

height:0;
width:0;
overflow:hidden;

You could also try positioning the content off the screen with absolute positioning.

position:absolute;
left:-1000px;
Matthew Darnell
  • 4,538
  • 2
  • 19
  • 29
0

One way which you can try is, instead of hiding them position absolutely with large negative left position and with minimum dimension may be 1 or 0.

ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
0

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.
Shawn
  • 8,374
  • 5
  • 37
  • 60
  • How will your 4th point trigger the content to download in advance (before the div is made visible)? –  Apr 27 '12 at 15:28
  • visible:hidden means the element still takes up space, but it isn't shown on screen. If you have an image without a fixed height/width, the browser would need to download it to know how big it is so it can render the space correctly. So it achieves the same effect of hiding the element, but it still downloads it. See also http://stackoverflow.com/questions/4718342/lots-of-dom-hidden-vs-display-none – Shawn Apr 27 '12 at 15:39