6

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?

bozdoz
  • 12,550
  • 7
  • 67
  • 96
  • 3
    This seems like one of those cases where typing in a quick test may have taken less time than posting a question :-) – Pointy Nov 04 '10 at 17:56
  • I did try to test it, but I think my trial and error didn't work because the first time I loaded the page, the page loaded the movie; the second time, it already had it loaded. Does that make sense? – bozdoz Nov 04 '10 at 18:25
  • 1
    The reason it was loaded the 2nd time was that it was cached - it had already been loaded by the browser *recently* so the browser just used the local version. – ClarkeyBoy Jan 01 '11 at 07:22

2 Answers2

21

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.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • Beat me to it - but I would recommend adding a reference to "see it in action" with Firebug, IE 8's dev tools, etc. – Harper Shelby Nov 04 '10 at 17:56
  • 1
    If you've already got code in place to change the element's display after the page is loaded, it should be trivial to instead change the element's innerHTML property and load the video. – Dave Nov 04 '10 at 18:15
0

display has nothing to do with true speed of loading. However it may effect appearance of speed in the same way a splash page.

Brian
  • 1,845
  • 1
  • 22
  • 37