Menu
Im sure this has been asked 1000 times before, basically all I want to do is change the content of an element of the page to display a loading message while my other javascript code (quite resource intensive) completes. The problem is the message isnt displayed untill after the "other JS processing" has completed, thus defeating its purpose entirely. a simplified example...
<html>
<head>
<title> crappity crapness </title>
<script type="text/javascript">
function showMessage(){
document.getElementById("content").innerHTML = "please wait while we waste some time";
}
function wasteTime(){
//alert("oh joy");
pausecomp(3000);
//alert("marvelous!");
}
function pausecomp(millis)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}
</script>
</head>
<body>
<div id="content">Blah</div>
<br/>
<a href="http://www.google.com" onclick="showMessage(); wasteTime();"> link </a>
</body>
if I uncomment the "oh Joy" alert, the text in the div gets updated Immediatly. how do I make it work without the alert?
I know I must be missing something simple. Thanks
428
visible through css [ display:block; ] and make the rest of the page invisible through css[ display:none; ]. Once the loading is done, just make the loading invisible and the page visible again with the same technique. You can use the document. getElementById() to select the divs you want to change the display.
Step 1: Add a background with a spinner gif on top of the page, then remove them when everything is loaded. Step 2: Add a little script right after the opening body tag to start displaying the load/splash screen. Highly active question.
What is the best way to make sure javascript is running when page is fully loaded? If you mean "fully loaded" literally, i.e., all images and other resources downloaded, then you have to use an onload handler, e.g.: window. onload = function() { // Everything has loaded, so put your code here };
Most likely, the problem is that you are including your js file in a head tag or somewhere above your main content. ... You should be able to add the js file in a script tag. The page loads first then JavaScript.
It sounds like you're coming up against the fact that Javascript is single-threaded, but browsers are not.
Basically, you can't have multiple pieces of Javascript running at once. However, the browser still has to do things outside of executing Javascript and proceeds to do so when it can. The problem is that whether modifying the DOM is synchronous (i.e. JS execution stops until it's done) or asynchronous (JS execution continues) isn't defined. Most browsers do the latter. But JS execution still has a quite high priority and a lot of DOM updates get deferred until the JS execution has to stop and wait. An alert box is an excellent example because it is waiting for user input.
The way to do what you want to do is to advantage of setTimeout() which lets the current piece of JS finish, the browser can then finish updating the DOM, and then it can execute JS waiting to run on a timeout.
198
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
