Show loader during page load NO AJAX
Is there a way to show the browser a loader image while the page is loading in the background?
I am creating an application which is basically a html5 application that will be loaded in a webview. All files will be located on the device itself, there is no interaction with the server, so AJAX cannot be used.
If the user navigates to another page then the loader should appear immediately and then hide when the page is fully loaded.
Is this something that can be done with JS?
thank
UPDATE:
I did exactly as you pointed out everything, showing the loader on the finished document, also showing it while the page is being unloaded and then the document is being rendered, but the loader is not showing for the time the page is being unloaded and on another page not yet loaded. Is there a way to bind the loader to the browser and not the page?
source to share
You can place the loading screen all over the content (position: absolute, 100% width and height) and dim it when the page is ready.
demo: http://jsfiddle.net/G8GkA/
<div id="page">
<div id="loader"><span>loading...<span></div>
content....
</div>
disappears on load (using jquery):
$(function(){
$('#loader').fadeOut();
});
source to share
You can 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 main idea is to show something until the document is ready.
EDIT
You could play with him. No need to hide content. You can overlay it on absolutely positioned div
and hide it only.
source to share