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?



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

3 answers

You have a page (PageLoader) that will load other pages with ajax, then the loader can be displayed.

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



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


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


disappears on load (using jquery):





You can do something like this

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


and in document


you could do as such

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


The main idea is to show something until the document is ready.


You could play with him. No need to hide content. You can overlay it on absolutely positioned div

and hide it only.



All Articles