CODEWITHSUNDEEP
html
Lewis
Lewis

Reputation: 147

loading for HTML5

I am launching a mobile site and I want it to have a loading icon while loading all the content and images.

Details: I have several pages. I want when I click on it will load the pages (to other html page), but I don't want to show the page without fully loaded and I want to show loading animation while it loading all the content. Once, the content is fully loaded. then the loading animation have to hide.

How to do that?

Upvotes: 0

Views: 3939

Answers (4)

Teemu Ikonen
Teemu Ikonen

Reputation: 11929

You are ready when all image assets have been loaded. Define full screen div that covers the whole page. In this div, show e.g. loading spinner animated gif and what ever text you want.

 <html>
    <head> .. </head>
    <body>
       <div id="loader"> .. </div>
       <div id="content" style="display:none"> .. </div>
       <script> .. </script>
    </body>
 </html>

On your script preload all images. This ensures that they are in cache when they are needed.

<script>
var loadc = 0;
function _preload(path) {
   var image = new Image;
   image.src = path;
   image.addEventListener('load', function() {
       loadc++;
       if (loadc == images.count) {
          $("#loader").hide();
          $("#hide").show();
       }
       //  update here progress counter on loading div
   };
}
var images = [ '/image/some.png', '/foo/bar.png' ]
$(document).ready(function() {
     for (var i = 0 ; i < images.length; i++) _preload(images[i]);
});
</script>

You need to define in images array all assets that you want to be ready when content div is shown, this includes stuff referred from CSS and DOM and possible dynamic DOM. You can use this same method for other assets, like audio and json.

Upvotes: 0

Trufa
Trufa

Reputation: 40717

You need to give a more specific question to get more specific (useful answers).

In the meantime here are some (hopefully useful) resources:

http://www.devcurry.com/2009/05/display-progress-bar-while-loading.html

http://jquery-howto.blogspot.com/2009/04/display-loading-gif-image-while-loading.html

http://banagale.com/display-a-simple-loading-message-and-animated-loading-gif-using-javascript.htm

http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/

This one may come particularly if it applies to your situation:

Showing a div while page is loading, hiding when its done

Good luck!

Upvotes: 1

SLaks
SLaks

Reputation: 887453

You can make a large <div> at the beginning of the page, then hide it using Javascript in the load event or using an illegal <style> block at the end of the <body>.

Upvotes: 2

picus
picus

Reputation: 1537

Any number of ways, but you will need javascript.

Upvotes: 0

Related Questions