while loading message

This solution was
Comment from ldbkutty
Date: 06/08/2004
---------------------
Displays a loading message as the page, including images and sound elements, are loaded in the background. When the page finishes loading the screen is shown, similar to how Macromedia's Flash plugin works.

function loadImages() {
if (document.getElementById) {  // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}
else {
if (document.layers) {  // Netscape 4
document.hidepage.visibility = 'hidden';
}
else {  // IE 4
document.all.hidepage.style.visibility = 'hidden';
      }
   }
}

// In the page:

<body onLoad="loadImages()">
<div id="hidepage" style="position: absolute; left:5px; top:5px; background-color: #FFFFCC; layer-background-color: #FFFFCC; height: 100%; width: 100%;">
<table width=100%><tr><td>Page loading ... Please wait.</td></tr></table></div>
<!-- put the rest of your page contents here -->
</body>
</html>
--------------------
Looks nice, the only thing is: The message doesn't disappear after the page is fully loaded. :-(
Tested with Firefox, Safari, Mozilla ...

I've some pages with each of &#8804;200 kb background pic (panoramic view), for which I would like to have such a "be patient"-message in a similar short and smart way.
zirbel_chAsked:
Who is Participating?
 
davidlars99Connect With a Mentor Commented:
this question is 100% solved!!!!!!!!
0
 
cyberdevil67Commented:
Hi zirbel_ch,
 There is also an event when the page is finished loading as well.

Cheers!
0
 
archrajanCommented:
just change ur function to

function loadImages() {

document.getElementById('hidepage').style.display= 'none';
}
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
cyberdevil67Commented:
zirbel_ch,

Sorry I should have said the best thing is have a div object that is over the entire browser, when the onload event fires then you can use the div style property display to change it to be hidden.
0
 
zirbel_chAuthor Commented:
@archrajan
And then it should work with all actual browsers?
I'll try it.

@cyberdevil
"a div object that is over the entire browser"? What do you mean with "over"?
0
 
archrajanCommented:

IE 6
FIREFOX
NETSCAPE  shud definitely will work!
0
 
cyberdevil67Commented:
When you load a div object you can change the z-index, to be above all other div objects then make the content your hiding lower than the loading section this way the user dosn't see it as work in progress.
0
 
zirbel_chAuthor Commented:
@archrajan
Sorry, the problem persits.

Script:
-------
function loadImages()
{
document.getElementById('hidepage').style.display= 'none';
}
-------

Page-Body:
-------
<body onload="loadImages()">
      <div id="hidepage" style="position:absolute;left:10px;top:10px;background-color:rgb(255,204,102);layer-background-color:rgb(255,204,102);height:10%;width:50%;">
      <table width=100%><tr><td><span>Image is loading ... Please be patient.<br />Das Bild wird geladen ... Bitte Geduld.<br />L&rsquo;image sera mont&eacute;e ... Patience s.v.p. </td> </tr></table></div>
-------

What else?
                  
0
 
archrajanCommented:
Pls try this
instead of calling the function with the onload event handler

do this

<script>
loadImages();
</script>
</body>
place this right before the closing </body> tag
0
 
zirbel_chAuthor Commented:
I realizied now the missing endtag of <span>. But can't be the reason, I think.
0
 
cyberdevil67Commented:
onLoad is only fired when the page has loaded..
0
 
archrajanCommented:
but sometimes during onload the div may not be reachable O

0
 
zirbel_chAuthor Commented:
<script>
loadImages();
</script>
</body>
This *instead* of the <body onload...>?
Too short for my little brain – where comes the message now?
0
 
archrajanCommented:
LIKE THIS

Script:
-------
function loadImages()
{
document.getElementById('hidepage').style.display= 'none';
}
-------

Page-Body:
-------
<body>
     <div id="hidepage" style="position:absolute;left:10px;top:10px;background-color:rgb(255,204,102);layer-background-color:rgb(255,204,102);height:10%;width:50%;">
     <table width=100%><tr><td><span>Image is loading ... Please be patient.<br />Das Bild wird geladen ... Bitte Geduld.<br />L&rsquo;image sera mont&eacute;e ... Patience s.v.p. </td> </tr></table></div>
 <script>
loadImages();
</script>
</body>
-------
0
 
archrajanCommented:
Also in firefox, do u see any message in the javascript console
Tools->Javascript console


any message saying hidepage is null or not an object?
0
 
cyberdevil67Commented:
Actually it is i have done this in the past

<body>
<div Id="Loading">
</div>
<div id="Content">
 All normaol content goes here
</div>

The First Div needs to have the z-index set to display ontop of all others, then using the onLoad to fire a javascript function to hide the first dib to reveal the page underneath. This allows for a Please Wait while loading style of page.

I can't recall if the second div is really needed, but I have most things in divs these days for styles anyway
0
 
zirbel_chAuthor Commented:
console means:
"loadimages is not defined"
0
 
zirbel_chAuthor Commented:
Oh sorry, just a moment.
Seems, that the script src is not written in all pages.
Coming back.
0
 
archrajanCommented:
Make sure the function name is loadImages both when u defined it and when u call it

and make sure u enclosed the function with the <script></script> tag!

and the function name is CASE-SENSITIVE
0
 
zirbel_chAuthor Commented:
I apologize for the missing script src.

After repairing this, the situation is:
[The function is outside of the pages, of course referenced by
<script src="../scripts/park.js" type="application/x-javascript"></script>]

- No js console error.
- But also no show of the message-div either (nothing to see of it)!
- Putting div z-index high (5) doesn't help.
0
 
zirbel_chAuthor Commented:
No I will check the additional
 <script>
loadImages();
</script>
</body>
0
 
zirbel_chAuthor Commented:
Script-add made no influence, no change.
Message-div is not shown.
0
 
archrajanCommented:
can u post the code u have??
0
 
cyberdevil67Commented:
The thing with the div to is that you need to set the width and height of it to fill the browser as well
0
 
zirbel_chAuthor Commented:
Ok, check a test-page out, please:
http://www.telquel.net/test/african_desert.html

(take care: window opens wide!)
0
 
archrajanCommented:
The page looks fine, u are not able to see the message because, ur images are loaded and they are set to display:none once they are loaded
u will find it tough to test on a fast internet connection
0
 
zirbel_chAuthor Commented:
@archrajan
Of course I'm on DSL, but when cleaning the cache, I've to wait some seconds too until the background-pic is loaded. For that time, the div-message should be shown, right?
0
 
archrajanCommented:
yes right,
i tried to clear my cache and loaded it, but the image loads pretty faster!

0
 
zirbel_chAuthor Commented:
@cyberdevil67
Is it a must, that the message-div height and wide has to be 100%?
But for *that* page it would be too heavy. ;-)
0
 
zirbel_chAuthor Commented:
@archrajan
You mean, call-up-surfing people will get the message?
Can I test-it out on ADSL with a really heavy pic (over 2 MB)?
0
 
archrajanCommented:
Or if u want that message to be seen always u shud do this

Hide the image first
show the waiting message
then after 2 seconds or so after the page is loaded hide the message and show the image
0
 
archrajanCommented:
yeah test with a real big image!
0
 
zirbel_chAuthor Commented:
I'ill try it.
0
 
zirbel_chAuthor Commented:
Uploaded a new pic (has the same name, but is of course not the same, shows Rocky Mountains,
but the size is not cutted to this page.).
It's about 2,5 MB.
Reload please!
0
 
archrajanCommented:
Please do this:
first remove the onload event from the body tag

then
replace
<script>loadImages();</script>
with

<script>setTimeout("document.getElementById('hidepage').style.display = 'none'",2000)</script>

0
 
zirbel_chAuthor Commented:
No effect.
Size of pic is not the reason ...
0
 
archrajanCommented:
Did u try my version above
0
 
zirbel_chAuthor Commented:
@archrajan
A decreeted timeout is not what I'm looking for.
The loading of a of page depends on things which can't be controlled by time (server, traffic etc.).
I need a solution which reacts to the actual conditions on the client-side.
0
 
archrajanCommented:
zirbel_ch,

Thats not only a decreeted timeout,
the script u r having currenty works!
but ur not able to test it, i am just showing u it works!
also, if u have an image lwith the <img> tag u can use the onload event there!
otherwise this is the only way!
see, if u r image is taking time to load, u can see the message!
There is nothing wrong i can smell in ur script!
0
 
archrajanCommented:
0
 
zirbel_chAuthor Commented:
This one is from Xxavier
and devic
09/06/04
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21120574.html

and it works!
--------------------
<body onload="document.getElementById('LoadMess').style.display='none'">
<div id='LoadMess' style="position:absolute;left:0px;top:0px;width:100%;height:100%;background-color:#ffffff;">The Page is Loading</div>
--------------------
Simple and smart.
0
 
zirbel_chAuthor Commented:
By the way: No need to set width and height to 100%.
People may see, how the page is loading ...
0
 
archrajanConnect With a Mentor Commented:
Ok glad that u got it to work:
0
 
davidlars99Commented:
you can check the status of any object that is currently loading but it would be different for each browser and some of them can't even do the task... only IE would be most reliable, check these out


[image status check]
http://www.frozendev.com/temp/image.asp


[audio/video status check]
http://www.frozendev.com/temp/sequensial.htm
0
 
davidlars99Commented:
audio/video example works only for IE and playes 3 different files (same sound though) and one file will start playing while still loading and no file will start playing until another is playing
0
 
davidlars99Commented:
sorry, I meant "one file will NOT start playing while....."
0
 
zirbel_chAuthor Commented:
@davidlars99
Looks nice too. Is not simple, but I'll try-it out.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.