admin管理员组

文章数量:1278720

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 pletely 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?

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 pletely 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?

  • javascript
  • html
  • browser
  • user-interface
Share Improve this question edited Mar 12, 2012 at 9:45 Harsha asked Mar 12, 2012 at 8:04 HarshaHarsha 7371 gold badge12 silver badges23 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

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/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.

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.

本文标签： javascriptShow loader while page is loading NO AJAXStack Overflow

版权声明：本文标题：javascript - Show loader while page is loading NO AJAX - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741283463a2370141.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。