?
Solved

while loading message

Posted on 2005-04-18
48
Medium Priority
?
210 Views
Last Modified: 2008-03-17
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.
0
Comment
Question by:zirbel_ch
  • 20
  • 17
  • 6
  • +1
47 Comments
 
LVL 9

Expert Comment

by:cyberdevil67
ID: 13805829
Hi zirbel_ch,
 There is also an event when the page is finished loading as well.

Cheers!
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13805876
just change ur function to

function loadImages() {

document.getElementById('hidepage').style.display= 'none';
}
0
 
LVL 9

Expert Comment

by:cyberdevil67
ID: 13805880
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:zirbel_ch
ID: 13806108
@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
 
LVL 25

Expert Comment

by:archrajan
ID: 13806120

IE 6
FIREFOX
NETSCAPE  shud definitely will work!
0
 
LVL 9

Expert Comment

by:cyberdevil67
ID: 13806131
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
 

Author Comment

by:zirbel_ch
ID: 13806209
@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
 
LVL 25

Expert Comment

by:archrajan
ID: 13806229
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
 

Author Comment

by:zirbel_ch
ID: 13806240
I realizied now the missing endtag of <span>. But can't be the reason, I think.
0
 
LVL 9

Expert Comment

by:cyberdevil67
ID: 13806242
onLoad is only fired when the page has loaded..
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13806262
but sometimes during onload the div may not be reachable O

0
 

Author Comment

by:zirbel_ch
ID: 13806270
<script>
loadImages();
</script>
</body>
This *instead* of the <body onload...>?
Too short for my little brain – where comes the message now?
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13806289
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
 
LVL 25

Expert Comment

by:archrajan
ID: 13806296
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
 
LVL 9

Expert Comment

by:cyberdevil67
ID: 13806306
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
 

Author Comment

by:zirbel_ch
ID: 13806338
console means:
"loadimages is not defined"
0
 

Author Comment

by:zirbel_ch
ID: 13806377
Oh sorry, just a moment.
Seems, that the script src is not written in all pages.
Coming back.
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13806378
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
 

Author Comment

by:zirbel_ch
ID: 13806639
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
 

Author Comment

by:zirbel_ch
ID: 13806666
No I will check the additional
 <script>
loadImages();
</script>
</body>
0
 

Author Comment

by:zirbel_ch
ID: 13806729
Script-add made no influence, no change.
Message-div is not shown.
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13806750
can u post the code u have??
0
 
LVL 9

Expert Comment

by:cyberdevil67
ID: 13806764
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
 

Author Comment

by:zirbel_ch
ID: 13807001
Ok, check a test-page out, please:
http://www.telquel.net/test/african_desert.html

(take care: window opens wide!)
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13807064
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
 

Author Comment

by:zirbel_ch
ID: 13807140
@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
 
LVL 25

Expert Comment

by:archrajan
ID: 13807163
yes right,
i tried to clear my cache and loaded it, but the image loads pretty faster!

0
 

Author Comment

by:zirbel_ch
ID: 13807171
@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
 

Author Comment

by:zirbel_ch
ID: 13807197
@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
 
LVL 25

Expert Comment

by:archrajan
ID: 13807206
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
 
LVL 25

Expert Comment

by:archrajan
ID: 13807208
yeah test with a real big image!
0
 

Author Comment

by:zirbel_ch
ID: 13807236
I'ill try it.
0
 

Author Comment

by:zirbel_ch
ID: 13807309
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
 
LVL 25

Expert Comment

by:archrajan
ID: 13807352
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
 

Author Comment

by:zirbel_ch
ID: 13807357
No effect.
Size of pic is not the reason ...
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13807370
Did u try my version above
0
 

Author Comment

by:zirbel_ch
ID: 13807436
@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
 
LVL 25

Expert Comment

by:archrajan
ID: 13807475
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
 
LVL 25

Expert Comment

by:archrajan
ID: 13807532
0
 

Author Comment

by:zirbel_ch
ID: 13807836
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
 

Author Comment

by:zirbel_ch
ID: 13807861
By the way: No need to set width and height to 100%.
People may see, how the page is loading ...
0
 
LVL 25

Assisted Solution

by:archrajan
archrajan earned 100 total points
ID: 13808075
Ok glad that u got it to work:
0
 
LVL 13

Expert Comment

by:davidlars99
ID: 13808712
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
 
LVL 13

Expert Comment

by:davidlars99
ID: 13808731
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
 
LVL 13

Expert Comment

by:davidlars99
ID: 13808734
sorry, I meant "one file will NOT start playing while....."
0
 

Author Comment

by:zirbel_ch
ID: 13813742
@davidlars99
Looks nice too. Is not simple, but I'll try-it out.
0
 
LVL 13

Accepted Solution

by:
davidlars99 earned 400 total points
ID: 14060190
this question is 100% solved!!!!!!!!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question