Does display:none keep elements from loading?

javascript css load-time
bozdoz picture bozdoz · Nov 4, 2010 · Viewed 7.6k times · Source

I have a large video file that I want to put on my main page. I don't want it to bog down the loading time, so I was thinking I could just set it to display:none and then change the display after the page loads. Would this work?

Answer

Pekka picture Pekka · Nov 4, 2010

Would this work?

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.

Related questions

How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More