Displaying a "Loading..." message for a long page
Hi Experts,
What is the best way to add an Loading... message to pages that are taking more than, say, 6 seconds, to load. Code not needed if you can explain the method to me.
Thanks.
What is the best way to add an Loading... message to pages that are taking more than, say, 6 seconds, to load. Code not needed if you can explain the method to me.
Thanks.
Hi
You would have a wrapper <div id="wrapper"> over all your code that has a style to set display to none. Then, have a <div id="loading"> over that at the top that has, for instance, Loading... in it. Finally, for your last onload function in your <body> tag, add this function:
function getObj(id) {
if (document.getElementById) {
return(document.getElement
} else if (document.all) {
return(document.all[id]);
} else if (document.layers) {
return(document.layers[id]
} else {
return false;
}
}
function doneLoading() {
var hide = getObj("loading");
var show = getObj("wrapper");
if (document.layers) {
hide.visibile='hide';
show.visible='show';
} else {
hide.style.display='none';
show.style.display='';
}
}
Regards,
Zyloch
You would have a wrapper <div id="wrapper"> over all your code that has a style to set display to none. Then, have a <div id="loading"> over that at the top that has, for instance, Loading... in it. Finally, for your last onload function in your <body> tag, add this function:
function getObj(id) {
if (document.getElementById) {
return(document.getElement
} else if (document.all) {
return(document.all[id]);
} else if (document.layers) {
return(document.layers[id]
} else {
return false;
}
}
function doneLoading() {
var hide = getObj("loading");
var show = getObj("wrapper");
if (document.layers) {
hide.visibile='hide';
show.visible='show';
} else {
hide.style.display='none';
show.style.display='';
}
}
Regards,
Zyloch
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Xxavier, lol. So simple, and I'm so stupid for not thinking of it. It might be better than to hide the whole page while loading--doh!
yes Xxavier's example is better, I would add width:100%, height:100% and position absolute...
so I do always..
===============
<html>
<body onload="document.getElemen
<div id='LoadMess' style="position:absolute;l
<img src=http://oldlook.experts-exchange.com/images/logoWhiteSmall.gif><br>
welcome to EE!
</body>
</html>
so I do always..
===============
<html>
<body onload="document.getElemen
<div id='LoadMess' style="position:absolute;l
<img src=http://oldlook.experts-exchange.com/images/logoWhiteSmall.gif><br>
welcome to EE!
</body>
</html>
I tried playing with the positioning and decided it is case of personal preference.
...I mean width and height
hi,
i wrote a small gadget function once saying how much of the page was loaded. if i remember correctly it was a hassle writing it and it wasn't very practical to use (because of all the details that needed to be specified) ... but just in case, here's the basic principles :
- i assume most of the bytes of a page are taken by images
- i write a javascript array in which i declare all my images : file name, (optional size in bytes, optional width, optional height, etc.)
- i dynamically write all these images with the info in the array, and i declare an onload event for when the images load.
- i manage the image onload events and therefore know how many images (and what size) has been loaded and calculate the proportion to the total of images.
the reason the image size in bytes is optional is for practical reasons (it's a pain to enter the info for every image file). the script takes the average size of all the images and assumes any unspecified size to be an average.
so this was just to chip in, if you're actually interested i can try to find my old code back ...
cheers,
stephane.
i wrote a small gadget function once saying how much of the page was loaded. if i remember correctly it was a hassle writing it and it wasn't very practical to use (because of all the details that needed to be specified) ... but just in case, here's the basic principles :
- i assume most of the bytes of a page are taken by images
- i write a javascript array in which i declare all my images : file name, (optional size in bytes, optional width, optional height, etc.)
- i dynamically write all these images with the info in the array, and i declare an onload event for when the images load.
- i manage the image onload events and therefore know how many images (and what size) has been loaded and calculate the proportion to the total of images.
the reason the image size in bytes is optional is for practical reasons (it's a pain to enter the info for every image file). the script takes the average size of all the images and assumes any unspecified size to be an average.
so this was just to chip in, if you're actually interested i can try to find my old code back ...
cheers,
stephane.
ASKER
Thanks to you all.
1. Put the Entire Page Content into a DIV.
2. Set the visibility to HIDDEN of that Div(Containing Page Content)
3. Now Make Sure you Type Your Message "Loading..." Outside of Div Tag That holds Page Content.
4. now on this page when the page is done loading set it back to visiblie within Body onLoad Event.
Example:
Page.html
Loading...
<div id="Loader" style="visibility:hidden">
content...
</div>
now in this page
<Body onLoad="document.getElemen
Hope that helps.