CODEWITHSUNDEEP
javascripthtmlbrowseruser-interface
Harsha
Harsha

Reputation: 737

Show loader while page is loading NO AJAX

Is there a way to tell browser to show a loader image while a page is loading in background?

I am building an app which is basically a html5 app which will be loaded on webview. All files will be located on device itself, there is no interaction with server so AJAX can't be used.

If user navigates to other page then immediately loader should appear and then hide when page is completely loaded.

Is this something that can be done using JS?

Thanks

UPDATE:

I did exactly as mentioned by you all, showing loader on document ready, also showing it while page is getting unloaded and then on document ready, but the loader is not visible during the time when page has unloaded and the other page has not yet downloaded. Is there a way to bind loader to browser rather than a page?

Upvotes: 4

Views: 7961

Answers (3)

Willem
Willem

Reputation: 5404

You can place a loading screen over all content (position:absolute, 100% width and height) and fade it out when the page is ready.

demo: http://jsfiddle.net/G8GkA/

<div id="page">
    <div id="loader"><span>loading...<span></div>
        content....
</div>

fade out on load (using jquery):

$(function(){
    $('#loader').fadeOut();
});

Upvotes: 4

Oybek
Oybek

Reputation: 7243

You could do something like this

<body>
  <div class="LoadingStyle" id="LoadingInfo"></div>
  <div style="visibility:hidden" id="Content">
  <!-- All your content goes here -->
  </div>
</body>

and in document ready you could do as such

$(function() {
    $("#LoadingInfo").hide();
    $("#Content").css("visibility", "visible");
});

The basic idea is to show something while document is not ready.

EDIT

You could play with it. It is not necessary to hide the content. You can overlay it with an absolutely positioned div and hide it only.

Upvotes: 3

dhinesh
dhinesh

Reputation: 4764

Have a page(PageLoader) which will load other pages using ajax, then the loader can be shown.

The PageLoader will take the page name as parameter and load the page.

Upvotes: 2

Related Questions