CODEWITHSUNDEEP
phpjavascripthtmlajaxload
AJ Naidas
AJ Naidas

Reputation: 1434

Loading Contents before Displaying in HTML5

I am developing a magazine in the internet and I want to know if it is possible to load all contents (images,videos,DOM) into a ready state before actually displaying the contents. While loading, a progress bar will show the progress of the content loading. Thank you very much!

Upvotes: 0

Views: 726

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123438

I suggest a solution boilerplate-like, using a specific class applied to <html> element. See my example fiddle: http://jsfiddle.net/tKtYd/

the idea is to apply the class waitpageloadbeforedisplay via javascript soon in the head and then use this class in the CSS to hide the main site wrapper. Then just wait for the window load event to remove that class and show your site content. In this way the content is still accessible, even if javascript is not available/disabled.

The loader is shown as a body background, using the css rule .waitpageloadbeforedisplay body(so you don't need to use markup for styling purpose).

Upvotes: 0

ori
ori

Reputation: 7847

Have something like:

<body>
     <div id="allcontent" style="display:none;"> 
          <!-- your entire page -->
     </div>
     <div id="progressbar">...</div>
</body>

And then

$(window).load(function() {
    $('#progressbar').remove();
    $('#allcontent').show();
});

EDIT: you could simulate the progress by counting the number of $('img') and then calculating the percentage of already loaded images at each $('img').load event. It's not perfect, but better than nothing

Upvotes: 3

Related Questions