Page Loading Message

@mcherneckiJun 10.2004

I have an online order form to be used by dealers logged into our site, just a few authenticated dealers. Due to the number of form fields, scripting, etc, the page is 159k and takes a while for dialup users. Dealers don’t mind waiting, as long as they know their browser hasn’t crashed and the page is loading. I need to keep it basic, no Flash or Java Applet. The preferred solution would be “Page Loading.”, “Page Loading ..”, “Page Loading …” type of text animation. Or an image displayed (possible an animated gif) over the page and removed when page is loaded. Or any other ideas??? Any ideas or solutions would be appreciated.

Thanks
Mike C.

to post a comment

JavaScript

15 Comments(s) _↴

@VladdyJun 10.2004 — #I bet you can optimize your page/scripting and reduce the size to under 50k so that you do not need a "page loading" message.

@mcherneckiauthorJun 10.2004 — #Well, I have optimized it quite a bit. This page was generated by OneForm and the resulting page was huge. I have removed some unused code and optimized other pieces, but it still isn't to the size I like. Until the time Ican go through and either rewrite everything or find more optimizations, the loading message will have to be the bandaid.

@PittimannJun 10.2004 — #Hi!

Could you post a link to the site please?

Cheers - Pit

@neil9999Jun 10.2004 — #Try something like this:

[code=php]<body onload="document.title='Page loaded'">
 <script type="text/javascript">
 document.title="Page loading";
 </script>[/code]

The script tags must come directly after the body tag.

Neil

@mcherneckiauthorJun 23.2004 — #Neil,

I tried your example and it works fine, but I wanted something that would show that some activity is taking place, such as Loading _> Loading. -> Loading.. _> Loading.... I modified what you had and also base some changes on some code I saw on this or another forum. The only thing is that it only run once and not continuously. Any idea on what I did wrong, code sample below.

<body onload="document.title='Page loaded'">

<script type="text/javascript">

var x=0;

document.title='Page Loading';

self.setTimeout('wait()',1);

function wait() {

if (x == 0) {document.title='Page Loading.';}

else if (x == 1) {document.title='Page Loading..';}

else if (x == 2) {document.title='Page Loading...';}

else {x=0;document.title='Page Loading';}

x++;

more();/* self.setTimeout('more()',10); */

}

function more() {

self.setTimeout('wait',10);

}

</script>

@VladdyJun 23.2004 — #

<i>
 </i>&lt;head&gt;
 &lt;title&gt;Page Loading&lt;/title&gt;
 &lt;script&gt;
 var ct = setInterval('document.title+="."',1000);
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="clearInterval(ct);document.title='Page Loaded'"&gt;

@mcherneckiauthorJun 23.2004 — #Vladdy - This works fine!! Thanks for your input.

Mike

@BrainDonorJun 24.2004 — #I'd like to add a twist to this...

Is there a way to do this so it appears in the body rather than just the title bar?

Thanks!

Tom

@mcherneckiauthorJun 25.2004 — #I just had a project meeting and although this solution works fine, it is now desireable to display a page loading splash screen rather than the message in the title bar. Is there a way to create this in javascript without moving to a java applet, flash, shockwave, etc. Simply display a blank page with the same page loading animation happening on the background, then load the actual page when it has loaded.

Thanks

Mike

@mcherneckiauthorJun 29.2004 — #I have solved this one myself. Went stupid for a bit and didn't think it out. Works great now.

Thanks All!!

Mike

@JslaveJun 29.2004 — #Well what did you come up with in the end ???

I am working on the same problem

@mcherneckiauthorJun 30.2004 — #I used Vladdy's code to display the status in the title bar. And I added a splash page to add animation while the page loaded. The splash page was created using a div layer sized to the window and a very high z-index so that it appears on top. I put an animated loading gif centered in the page and set the div background color to paint over the page contents. Then set visibility of the div layer to hidden on the onLoad event. Loading gif shown below.

Mike

[IMG]http://www.adapsys.ca/loading.gif[/IMG]

@JslaveJul 01.2004 — #I understand the process...

Could you post the code please ??

Appreciate it

Thanks

JSlave

@mcherneckiauthorJul 01.2004 — #First of all, take a look at the following page, I found it helpful in trying to hide the div layer you need to create.

[URL=http://www.geocities.com/technofundo/tech/js/showhide.html]http://www.geocities.com/technofundo/tech/js/showhide.html[/URL]

code for div layer, using demodiv style from above page:

<div ID="demodiv" class="demo">

<table width=100% height=100%>

<tr>

<td align=center valign=middle>

<IMG SRC="loading.gif" BORDER=0 HSPACE=0 VSPACE=0>

</td>

</tr>

</table>

</div>

use the following in <body> tag to hide layer after page loads:

onLoad="toggleBox('demodiv',0)

Let me know if I missed anything.

Mike

@JslaveJul 01.2004 — #Thank you very much Mike !

I think between your code

and the info on the page

I should have it going in no time

I will test it out tomorrow

Thanks again

<CODE>JSlave</CODE>

Also in #JavaScript _↴

toggle onmouseover functions Help with script please...get data from next winndow

Success!

Help @mchernecki spread the word by sharing this article on Twitter...

Tweet This

Page Loading Message

15 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Page Loading Message

15 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #JavaScript _↴