Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 299
  • Last Modified:

question for non-top-experts #7

<preamble>
I'm asking experts who are already ranked in the TA top-15 not to help on this Q.

When I started on this site, it was not as busy as now, and top-experts had time to help us newbies along. To address that reduced availability for education I am posting a serious of questions for the less experienced experts to work on, So that they will perhaps be encouraged to work up into the rankings.

I will leave this Q posted a few days and then award the best comment the points.  I may post additional poits for other comments that add value to the thread.

Top-experts, if you want to add comments after I close it please feel free; but please let the newer experts complete or collaborate without help.

If anyone wants to discuss the purpose or affect fo these Qs, please email me at one of the addresses in my profile, and leave it out of the thread.
</preamble>

The Q:

Some pages require a long time to load, and the developer wants to let the user know that the load is going okay with a status.  How can that be done?

Cd&
0
COBOLdinosaur
Asked:
COBOLdinosaur
  • 8
  • 5
  • 3
  • +6
1 Solution
 
spo0kyCommented:
If you mean preloading, than it can be done so:

<html>
<head>
<script language=javascript>
<!--

image1 = new Image()
image1.src = "someimage.jpg"
image2 = new Image()
// and so on, all the images, on the page that's going to be loaded

//-->
</script>
</head>

<body onload="window.location.href='mainpage.html'">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">:: p r e l o a d i n g ::</td>
  </tr>
</table>

</body>
</html>
0
 
spo0kyCommented:
sorry, you were talking about status bar, then remove

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td align="center">:: p r e l o a d i n g ::</td>
 </tr>
</table>

from the body and add

window.status = "page is preloading, please wait"

to the beginning of the script in the head.


0
 
spo0kyCommented:
in nn4 it's possible to be done so:

if (window.loading) window.status = "page is preloading, please wait"
0
Independent Software Vendors: 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!

 
spo0kyCommented:
Or if you want to do preloading on the main page, use this:

<html>
<head>
<script language=javascript>
<!--
window.status = "page is preloading, please wait"
image1 = new Image()
image1.src = "someimage.jpg"
image2 = new Image()
// and so on, all the images, on the page that's going to be loaded

//-->
</script>
</head>

<body onload="window.status = ''">

</body>
</html>
0
 
spo0kyCommented:
Or if you want to do preloading on the main page, use this:

<html>
<head>
<script language=javascript>
<!--
window.status = "page is preloading, please wait"
image1 = new Image()
image1.src = "someimage.jpg"
image2 = new Image()
// and so on, all the images, on the page that's going to be loaded

//-->
</script>
</head>

<body onload="window.status = ''">

</body>
</html>
0
 
spo0kyCommented:
Or there is also a possibility to use window.defaultStatus
instead of window.status and I think that will be even better.
0
 
spo0kyCommented:
Could you plaese give the addresses of other "questions for non-top-experts"
0
 
arbertCommented:
Or you could simply create an animated GIF file that looks like a status bar that is incrementing and display that while the page is loading....
0
 
voskCommented:
Hello. That's my attempt to answer, but surelly won't be the better.
First I thought that I could use a function to check if each "object", for images and <p> tags and everithing writted on the page, is completed. But that is a lot of coding. For one image seems easy but I cannot control the state or the % of the image that is always loaded. Simply using an interval and checking the image state:
<html>
<head>
<script language="JavaScript">
function A()
{
int = window.setInterval("inter()",50);
}
function inter()
{
if (document.all.image.complete != false)
         {window.clearInterval(int); window.status = "COMPLETE"};
else
          {window.status = "LOADING, WAIT..."};
}
</script>
</head>
<body onLoad="A();">
<img src="image.jpg" id="im">
</body>
</html>
Then I used the onReadyStateChange applied to the document.
First I had tryed to do that to an image and seems to work well, but with two images the code is a bit larger. So then I tryed to applicate to the document, but not the same page where are the scripts, and that is the result:
<html>
<head>
<script language="JavaScript">
var int, page;
function A(image)
{
page = window.open("page.html", "page");
document.focus();
int = window.setInterval("loadState()",50);
}
function loadState()
{
var st = page.document.readyState;
if (st == 0) {document.all.i.innerText = "waiting for download..."};
if (st == 1) {document.all.i.innerText = "downloading..."};
if (st == 2) {document.all.i.innerText = "loaded..."};
if (st == 3) {document.all.i.innerText = "interactive..."};
if (st == 4) {document.all.i.innerText = "complete."; page.document.focus()};
}
</script>
</head>
<body onLoad="A();">
Document is <span id="i"></span>
</body>
</html>
Unfortunately that don't work. The "i" span is always empty.
I'm really very interested in that question because some months ago I asked exactly the same but since today nobody answered anything.
Hope that my answer will give ideas to someone more experimented in JavaScript to post the correct answer.
jbosch(vosk)
0
 
voskCommented:
Ooops, a little mistake: on the first line of my post read "will be the worst" instead "won't be the better"
jbosch(vosk)
0
 
spo0kyCommented:
You can add onload events to every image in my code as well (image1.onload, image2.onload)

And after every of this images is loaded display in the statusbar something like this: "image 1(10) is loading, please wait"
0
 
voskCommented:
And what about if the document is text only? Or with images to preload? You cannot use the load state for images to control all the document...
It can be a good way to insert control points inside the body? And control their load state with an interval, something like that:
<html>
<head>
<script language="JavaScript">
var int, p1 = 0, p2 = 0, p3 = 0, p4 = 0, state = 0;
function A()
{
int = window.setInterval("B()",50);
}
function B()
{
if (p1 == 0)
     {if (document.all.cp1.complete != false)
          {p1 == 1;
           state++
          };
     };
if (p2 == 0)
     {if (document.all.cp2.complete != false)
          {p2 == 1;
           state++
          };
     };
if (p3 == 0)
     {if (document.all.cp3.complete != false)
          {p3 == 1;
           state++
          };
     };
if (p4 == 0)
     {if (document.all.cp4.complete != false)
          {p4 == 1;
           state++
          };
     };
if (state == 0) {window.status = "No loading..."};
if (state == 1) {window.status = "25% loaded..."};
if (state == 2) {window.status = "50% loaded..."};
if (state == 3) {window.status = "75% loaded..."};
if (state == 4) {window.status = "Document complete."; window.clearInterval(int)};
}
</script>
</head>
<body onLoad="A();">
Here is some text.
<span id="cp1" style="visibility:hidden">Control point 1</span><br>
Here is more text.
<span id="cp2" style="visibility:hidden">Control point 2</span><br>
Here is more text.
<span id="cp3" style="visibility:hidden">Control point 3</span><br>
Here is more text.
<span id="cp4" style="visibility:hidden">Control point 4</span><br>
</body>
</html>
Of course that if we have a document with images we'll set those images as control points. And if we have more control points that 4 then we can set the % downloaded in minor values.
jbosch(vosk)
0
 
AntithesisCommented:
Here's one that displays a primitive loading bar in the status while preloading images:
----------
var l_imgdir = "http://www.yoursite.com/images/";
var l_srcs = [];
var l_imgs = [];
l_srcs[0] = "img1.gif";
l_srcs[1] = "img2.gif";
l_srcs[2] = "img3.gif";
l_srcs[3] = "img4.gif";
function getbar(gbp,gbn)  {
     gbt='';
     for(gbx=0;gbx<gbn;gbx++)  {
          if((gbp*gbn)>gbx) gbt += '|';
          else gbt += '-';
     }
     return gbt;
}
var l_x = 0;
do  {
     l_imgs[l_x] = new Image();
     l_imgs[l_x].src = l_imgdir+l_srcs[l_x];
     window.status = "Loading Images... " +getbar(l_x/l_srcs.length, 20);
     l_x++;
} while (l_x<l_srcs.length);
window.status = "Loading..."
window.onload = function(){window.status = "Done";}
----------
0
 
jaysolomonCommented:
whats sup Cd& ^

Here is one way to do it. I got this from Dynamic drive. I have used this before.
==========================================================
<html>

<head>
<title>Progress Bar</title>
<!--Credit Dynamic Drive, I added the extra Layer over the progress Bar-->
<style>
<!--
#bar, #barbackground{
position:absolute;
left:0;
top:0;
background-color:blue;
}

#barbackground{
background-color:black;
}

-->
</style>
<script language="JavaScript1.2">

/*
Dynamic Progress Bar- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/

//1) Set the duration for the progress bar to complete loading (in seconds)
var duration=5

//2) Set post action to carry out inside function below:
function postaction(){
//Example action could be to navigate to a URL, like following:
window.location="http://www.cnn.com"
}


///Done Editing/////////////
var clipright=0
var widthIE=0
var widthNS=0

function initializebar(){
if (document.all){
baranchor.style.visibility="visible"
widthIE=bar.style.pixelWidth
startIE=setInterval("increaseIE()",50)
}
if (document.layers){
widthNS=document.baranchorNS.document.barbackgroundNS.clip.width
document.baranchorNS.document.barNS.clip.right=0
document.baranchorNS.visibility="show"

startNS=setInterval("increaseNS()",50)
}
}

function increaseIE(){
bar.style.clip="rect(0 "+clipright+" auto 0)"
window.status="Loading..."
if (clipright<widthIE)
clipright=clipright+(widthIE/(duration*20))
else{
window.status=''
clearInterval(startIE)
postaction()
}
}

function increaseNS(){
if (clipright<202){
window.status="Loading..."
document.baranchorNS.document.barNS.clip.right=clipright
clipright=clipright+(widthNS/(duration*20))
}
else{
window.status=''
clearInterval(startNS)
postaction()
}
}


window.onload=initializebar
</script>
</head>

<body>
<script language="JavaScript1.2">
if (document.all){
document.write('<div id="baranchor" style="position:relative;width:200px;height:20px;visibility:hidden;">')
document.write('<div id="barbackground" style="width:200px;height:20px;z-index:9"></div>')
document.write('<div id="bar" style="width:200px;height:20px;z-index:10"></div>')
document.write('</div>')
}

</script>
<div id="Layer1" style="position:absolute; width:200px; height:22px; z-index:1; left: 7px; top: 16px">
  <div align="center"><b><font color="#FF0000">Loading... Please Wait</font></b></div>
</div>
<ilayer name="baranchorNS" visibility="hide" width=200 height=20 top="227" left="245">
<layer name="barbackgroundNS" bgcolor=black width=200 height=20 z-index=10 left=0 top=0></layer>
<layer name="barNS" bgcolor=blue width=200 height=20 z-index=11 left=0 top=0></layer>
</ilayer>

</body>

</html>
==========================================================

jAy
0
 
ahosangCommented:
I never recommend messing with the status bar. Probably just personal preference, but also, it's unnecessarily difficult cross-browser. Need user preferences to be set with Netscape, and may not even be visible on any browser(due to user setting).
0
 
jwentingCommented:
The only realistic use for manipulating the status bar would be to hide the URL of a link when you mouse over it, and I see little reason for that unless it's a redirect you don't want the user to know about (and why would you want that?).

Anyway, if your page loads so slowly that users need to be entertained while they're loading it there is something wrong with the page and adding code to do the entertainment will add even more to that loading time.

A far better option is to cut down on the graphics and optimise them more, you'd be surprised how much smaller a JPG becomes with a little bit of compression without any visual impact for example. And change the size of the pictures to the real size you want them to display (and not like I see often have an 800x600 JPG displayed at 100 pixels wide).
0
 
voskCommented:
jaysolomon : how can you madify your code to draw the "loading..." while the page is loading, not before? I have tryed to use that but it seems a backcounter and then redirect to another page.
Also I have seen now that COBOLdinosaur wasn't asking 'how to display the status on the staus bar'.
jbosch(vosk)
0
 
jaysolomonCommented:
Well here is one. I got the loading bar from dynamic drive, and edit it to show the contents.
==========================================================

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>
<script type="text/javascript">
// Timer Bar - Version 1.0
// Author: Brian Gosselin of http://scriptasylum.com
// Script featured on http://www.dynamicdrive.com

var loadedcolor='darkgray' ;       // PROGRESS BAR COLOR
var unloadedcolor='lightgrey';     // COLOR OF UNLOADED AREA
var bordercolor='navy';            // COLOR OF THE BORDER
var barheight=15;                  // HEIGHT OF PROGRESS BAR IN PIXELS
var barwidth=300;                  // WIDTH OF THE BAR IN PIXELS
var waitTime=5;                   // NUMBER OF SECONDS FOR PROGRESSBAR

// THE FUNCTION BELOW CONTAINS THE ACTION(S) TAKEN ONCE BAR REACHES 100%.
// IF NO ACTION IS DESIRED, TAKE EVERYTHING OUT FROM BETWEEN THE CURLY BRACES ({})
// BUT LEAVE THE FUNCTION NAME AND CURLY BRACES IN PLACE.
// PRESENTLY, IT IS SET TO DO NOTHING, BUT CAN BE CHANGED EASILY.
// TO CAUSE A REDIRECT TO ANOTHER PAGE, INSERT THE FOLLOWING LINE:
// window.location="http://redirect_page.html";
// JUST CHANGE THE ACTUAL URL OF COURSE :)

var action=function()
{

document.getElementById('PBouter').style.display='none'
document.getElementById('Ctent').style.visibility="visible"
document.getElementById('xxx').style.visibility="hidden"
}

//*****************************************************//
//**********  DO NOT EDIT BEYOND THIS POINT  **********//
//*****************************************************//

var ns4=(document.layers)?true:false;
var ie4=(document.all)?true:false;
var blocksize=(barwidth-2)/waitTime/10;
var loaded=0;
var PBouter;
var PBdone;
var PBbckgnd;
var Pid=0;
var txt='';
if(ns4){
txt+='<table border=0 cellpadding=0 cellspacing=0><tr><td>';
txt+='<ilayer name="PBouter" visibility="hide" height="'+barheight+'" width="'+barwidth+'" onmouseup="hidebar()">';
txt+='<layer width="'+barwidth+'" height="'+barheight+'" bgcolor="'+bordercolor+'" top="0" left="0"></layer>';
txt+='<layer width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+unloadedcolor+'" top="1" left="1"></layer>';
txt+='<layer name="PBdone" width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+loadedcolor+'" top="1" left="1"></layer>';
txt+='</ilayer>';
txt+='</td></tr></table>';
}else{
txt+='<span id="xxx" style="visibility:show;font=arial;color=Red;">Loading...Please Wait!!</span>';
txt+='<div id="PBouter" onmouseup="hidebar()" style="position:relative; visibility:hidden; background-color:'+bordercolor+'; width:'+barwidth+'px; height:'+barheight+'px;">';
txt+='<div style="position:absolute; top:1px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; background-color:'+unloadedcolor+'; font-size:1px;"></div>';
txt+='<div id="PBdone" style="position:absolute; top:1px; left:1px; width:0px; height:'+(barheight-2)+'px; background-color:'+loadedcolor+'; font-size:1px;"></div>';

txt+='</div>';
}

document.write(txt);

function incrCount(){
window.status="Loading...";
loaded++;
if(loaded<0)loaded=0;
if(loaded>=waitTime*10){
clearInterval(Pid);
loaded=waitTime*10;
setTimeout('hidebar()',100);
}
resizeEl(PBdone, 0, blocksize*loaded, barheight-2, 0);
}

function hidebar(){
clearInterval(Pid);
window.status='';
//if(ns4)PBouter.visibility="hide";
//else PBouter.style.visibility="hidden";
action();
}

//THIS FUNCTION BY MIKE HALL OF BRAINJAR.COM
function findlayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers[i];
if(layer.name==name)return layer;
if(layer.document.layers.length>0)
if((layer=findlayer(name,layer.document))!=null)
return layer;
}
return null;
}

function progressBarInit(){
PBouter=(ns4)?findlayer('PBouter',document):(ie4)?document.all['PBouter']:document.getElementById('PBouter');
PBdone=(ns4)?PBouter.document.layers['PBdone']:(ie4)?document.all['PBdone']:document.getElementById('PBdone');
resizeEl(PBdone,0,0,barheight-2,0);
if(ns4)PBouter.visibility="show";
else PBouter.style.visibility="visible";
Pid=setInterval('incrCount()',95);
}

function resizeEl(id,t,r,b,l){
if(ns4){
id.clip.left=l;
id.clip.top=t;
id.clip.right=r;
id.clip.bottom=b;
}else id.style.width=r+'px';
}

window.onload=progressBarInit;
</script>
<span id="Ctent" style="position:absolute; left:28px; top:109px; width:741px; height:230px; z-index:1; background-color:#FF0000; layer-background-color:#FF0000; border: 1px none #000000; visibility:hidden; overflow: visible">Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing
</span>
</body>
</html>
0
 
COBOLdinosaurAuthor Commented:
Some good stuff coming in here.

hint:

Maybe the way the question is worded is misleading.  Reporting the progress does not have to accurately reflect what is going on.  Just give the user something to look at while the page is loading, then get rid of it when the page is rendered.

What I'm looking at is not so much control functionality, as it is effect.  Something to keep the user from hitting the back button for a very slow loading page.

Cd&
0
 
AntithesisCommented:
Well if you just want something to look at, try this one:
<script language="javascript">
var msg = "Loading...";
var pos = 0;
function showanim()  {
     if (pos < msg.length)  {
          pos++;
     }
     else  {
          pos = 0;
          window.status = " ";
     }
     s_timer = setTimeout("showanim()", 100);
}
showanim();
onload = function(){clearTimeout(s_timer);window.status = "";};
</script>
0
 
IthaiCommented:
What about this one:


<script language="JavaScript1.1">
<!-- begin hiding

var locationAfterPreload = "http://www.yoursite.com/index2.html"
var lengthOfPreloadBar = 150      
var heightOfPreloadBar = 15          
var yourImages = new Array("http://www.yoursite.com/html/images/image01.gif","http://www.yoursite.com/html/images/image02.gif") // you can put as many images as you like.

if (document.images) {
     var dots = new Array()
     dots[0] = new Image(1,1)
     dots[0].src = "black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
     dots[1] = new Image(1,1)
     dots[1].src = "blue.gif" // color of bar as preloading progresses (same note as above)
     var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
     var loaded = new Array(),i,covered,timerID
     var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() {
     for (i = 0; i < yourImages.length; i++) {
          preImages[i] = new Image()
          preImages[i].src = yourImages[i]
     }
     for (i = 0; i < preImages.length; i++) {
          loaded[i] = false
     }
     checkLoad()
}
function checkLoad() {
     if (currCount == preImages.length) {
          location.replace(locationAfterPreload)
          return
     }
     for (i = 0; i <= preImages.length; i++) {
          if (loaded[i] == false && preImages[i].complete) {
               loaded[i] = true
               eval("document.img" + currCount + ".src=dots[1].src")
               currCount++
          }
     }
     timerID = setTimeout("checkLoad()",10)
}
// end hiding -->
</script>

<body>
<script language="JavaScript1.1">
               <!-- begin hiding
                    // It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
                    // for some reason, or his browser doesn't support JavaScript image object.
                    if (document.images) {
                         var preloadBar = ''
                         for (i = 0; i < yourImages.length-1; i++) {
                              preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
                         }
                         preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
                         document.write(preloadBar)
                         loadImages()
                    }
                    document.write('<p><font face="Arial, Helvetica, sans-serif"><small>If site does not start after 10 secs, go <a href="javascript:window.location=locationAfterPreload">here</a></small></font></p>')
// end hiding -->
</script>
</body>


Greetz, I.
0
 
voskCommented:
Because I'm not so good programming as those ones and because we cannot use a large code to wait till another large code is loaded, I'll think on use a simple text page (directly a *.txt file) with some jokes, pastimes, etc. In a bank page or an imporant company's page maybe that will seem not much professional, but in a personal page that's no problem. Of course that I will have to update the jokes every week or month.
Another solution like that can be to insert a news page, maybe contacting with a newspaper company to write a page (only the news in plain text and "Thank's to the AAA news company...", something to load speed) that I can open while the big page is charging.
jbosch(vosk)
0
 
COBOLdinosaurAuthor Commented:
This question jumped around a awful lot.  There are some good initial ideas posted, but the question sort of rambles around.  I left it longer than normal, because I was hoping you would pull it out.

I'll accept Ithai and post additional Qs for other significant contributions, but let me give a few hints first.  None of you attempted to engae me in the solution.  The questions was not very specific, which is whay it drifted around.  Had you directed questions back at me, you would have gotten more information, and we might have narrowed thing down.

The other problem, is that you did not really work together on it.  When the user does not provide much, sometimes it is useful to play with each others ideas.  Some of the best threads on the site are the result of experts feeding off of each others ideas.

Now I will go post the additional points. be right back.

Cd&
0

Featured Post

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!

  • 8
  • 5
  • 3
  • +6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now