pafruu Posted February 2, 2009 Share Posted February 2, 2009 Hey Guys,I must say I'm a n00b when it comes to javascript. Here is the situation, I've got a page on a website that has a lot of elements to be loaded to it. (it's the way the customer wanted it). Now Ive managed to come up with a progress bar on the page which wotrks fine locally but as soon as it gets ion to the web, its seems to be disappearing within 2 seconds. here is waht i got at the top of the page: ...</head><body leftmargin="0" topmargin="0" ><div id="slowScreenSplash" STYLE="position:fixed;z-index:5;top:200px;left:400px; background-image:url(images/bg.gif); background-repeat:no-repeat; width:450px; height:250px; padding-top:100px;" align="center"> <font color="#FFFFFF">Please wait whilst your request is being processed...</font><br><br><div class="progressBar"> <span><em style="left:300px"></em></span> </div></div><table width="760" border="0" cellpadding="0" cellspacing="0" align="center"><tr>...and at the bottom:...</tr></table><script>document.all["slowScreenSplash"].style.display = "none";</script></body></html>Im sure i'm missing something here but I do not know what, please help Link to comment Share on other sites More sharing options...
jeffman Posted February 2, 2009 Share Posted February 2, 2009 It was a good idea to put the "disappear" script at the bottom of the page, but that's not how things work. The TEXT of your page actually downloads pretty quickly. Other page objects, like images or movie files, begin to download as soon as the browser reads their address, but the browser doesn't wait for them before loading the rest of the page.So your script gets run almost immediately, as you observed, and a long time before the other objects arrive.Javascript and the DOM do not provide a convenient way to know when all those objects have finished downloading. (window.onload isn't it.) You would have to attach an onload handler to each one, and also somehow keep track so you know when ALL have loaded. Link to comment Share on other sites More sharing options...
pafruu Posted February 2, 2009 Author Share Posted February 2, 2009 Thank you for the quick reply I do have a onload event attached to all the images, how would I go about this? Link to comment Share on other sites More sharing options...
jeffman Posted February 2, 2009 Share Posted February 2, 2009 Here's a demo. I've only tested it in Firefox. For the archives, let me explain a bit. My first thought was to automate the process. This would involve a window.onload handler that gets a reference to all the objects in question, probably through document.getElementsByTagName(). Then it would loop through the list, and attach an onload handler to each one. The handler would increment a global variable and compare that variable to the total number of objects. When the numbers are the same, hide the progress bar.But there are problems. If the browser has visited the page already, the images are already cached. They load instantly, before the window.onload handler can count them and attach their own onload handlers. Also, if a link is broken, or the user aborts the download, any affected images would not trigger their onload handlers -- so the incrementing variable would never match the total count, and the progress bar would never get hidden.My solution is to attach the onload handler in the link itself (which is a common technique, but not best practice). We also attach onerror and onabort handlers. The script must come before the body element, and should probably be in the document itself, not an external script (just in case its download got delayed). The progress bar div MUST be placed in the document above any of the objects we're tracking.Sounds complicated, but as you'll see, the result looks pretty ordinary. Just realize that this arrangement is required, or it all falls apart. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title></title> <script type="text/javascript"> object_total = 2; // YOU MUST HARD-CODE THIS VALUE object_count = 0; function count_object() { object_count += 1; if (object_count == object_total) {alert('hello'); document.getElementById("slowScreenSplash").style.display = "none"; } } </script> </head> <body> <div id="slowScreenSplash">content</div> <div> <img src="whatever.jpg" onload="count_object()" onabort="count_object()" onerror="count_object()"> <img src="another.jpg" onload="count_object()" onabort="count_object()" onerror="count_object()"> </div> </body></html> (While I'm at it, let me recommend that you brush up on modern HTML. You have a lot of legacy markup.) Link to comment Share on other sites More sharing options...
pafruu Posted February 2, 2009 Author Share Posted February 2, 2009 Thanks, I got it working now! Great help! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.