I want to show the user that the document which he wants to access is loading and not ready yet.
I want to show the web-page when it is fully loaded.
I use
$(document).ready(function(){});
for document ready. What should I do for my approach?
I want to show the user that the document which he wants to access is loading and not ready yet.
I want to show the web-page when it is fully loaded.
I use
$(document).ready(function(){});
for document ready. What should I do for my approach?
Share Improve this question asked Feb 22, 2011 at 15:51 DarkLeafyGreenDarkLeafyGreen 70.5k136 gold badges391 silver badges616 bronze badges 1- That involves writing a small bootstrap system. Historically, people achieved this using (i)frames. However, a possible solution is to write a visible loader element while outputting inside a hidden element, and then switch visibility after loading. – Christian Commented Feb 22, 2011 at 15:59
2 Answers
Reset to default 8The first thing to do is ask why the page is so slow to load that you feel you need a loading banner, and to do whatever you can to fix that.
If you can't fix that because of the nature of the page in question, the next consideration is making sure that the "Loading" banner only appears for people who have JavaScript enabled (because we're going to remove it later with JavaScript, so it would be a bit mean to put it there and then not remove it if they don't have JavaScript). This may be one of the few valid remaining uses of the document.write statement (and only if you're not using XHTML, because it's not valid in XHTML):
<body>
<script>
document.write("<p id='loading'>Loading...</p>");
</script>
...which you'd style with CSS, presumably:
#loading {
position: absolute;
left: 0px;
top: 0px;
background-color: #ddd;
/* ... */
}
And then in your ready handler, remove it:
$('#loading').remove();
If you're using XHTML (or you just don't want to use document.write on principle), you can do something similar without document.write, along the lines of:
<body>
<script>
(function() {
var p = document.createElement('p');
p.id = 'loading';
p.innerHTML = "Loading...";
document.body.appendChild(p);
})();
</script>
Live example (Tested on IE6/7/8 on Windows; Safari on Windows; and Chrome, Opera, and Firefox on Linux and Windows.)
Write some element with the loading text/animation at the start of the code, then remove or hide that element with javascript on document ready. Some output buffering might be needed to get the loading-message to show up right away.
$(function() {
$("#loading_element").hide();
});