Does hiding a div load the information?

Question

Just wondering if when i display a div as hidden does the information gete loaded then hidden or does it get loaded when it is shown? can't remember the ters but it's like display="none" or something.

Thanks

Answer 1

This question is similar to yours. Does display:none keep elements from loading?

The part that relates to your question is this ->

Nope. display: none will only prevent the element from being displayed; it will be loaded nevertheless.

You can watch this happen in the element inspector of your choice (e.g. in Firebug or IE8's dev tools).

The best way is probably to create the Video element using JavaScript afterwards, or - if you want a fail-safe solution in case JS is turned off - you could use an iframe that loads the video if the user clicks a link.

Hope that helps!

Answer 2

It still gets loaded into the DOM, but the browser doesn't show it since there is a hint to hide it. Just use a DOM inspector like IE deveopler tools to inspect it, and you will see it with display:none

Answer 3

There are couple of CSS styles that you can use to hide the information from being displayed.

display: none and visibility: hidden

Both of them will actually load the DOM content but does not display them.visibility: hidden takes the space required for that DOM element accordingly in the layout eventhough it does not display the element. But display: none considers that the element is not present in the DOM and does not occupy any space in DOM corresponding to that element.

Please see this: http://jsfiddle.net/JSWorld/ADSmc/