Menu
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?
616
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();
});
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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
