Need help loading a page before displaying it

**alwaysdrawing** · 04-25-2009 11:40 AM

I'm trying to create a simple loading bar for my site, but I'm not sure how to do it. I looked up some methods on the internet but they didn't work for my particular layout. Right now my site is sitting in a wrapper so some of the loading bars that I've tried are behind the wrapper. Kind of defeats the purpose if you can still see everything load... I'm just looking for something simple but effective.

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Online Portfolio</title>
 <style type="text/css">
 <!--
  body {
   background-color: #000000;
  }
  #wrapper{
   position: relative;
   background: #000000 url(images/background.jpg) no-repeat fixed;
   width: 878px;
   height: 572px;
   margin-left: auto;
   margin-right: auto;
  }
  .style1 {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  color: #E9CA77;
  font-weight: bold;
  }
 -->
 </style>
    <script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('images/about_btn_out','images/about_btn_ro.gif','images/gallery_btn.gif','images/videos_btn_ro.gif')">
<div id="wrapper">
<table width="864" hieght="595" align="center">
  <tr>
    <td width="344" rowspan="3" valign="bottom"><img src="images/name.gif" width="284" height="44" align="absbottom"></td>
    <td colspan="2" rowspan="2" align="left" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/about_btn_ro.gif',1)"><img src="images/about_btn_out.gif" name="Image1" width="114" height="57" border="0"></a></td>
    <td width="113" height="21" align="left" valign="top">&nbsp;</td>
    <td width="208" align="left" valign="top">&nbsp;</td>
    <td width="49" rowspan="2" align="left" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="62" align="left" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/gallery_btn.gif',1)"><img src="images/gallery_btn_out.gif" name="Image2" width="113" height="46" border="0"></a></td>
    <td width="208" align="left" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/videos_btn_ro.gif',1)"><img src="images/videos_btn_out.gif" name="Image5" width="127" height="60" border="0"></a></td>
  </tr>
  <tr>
    <td width="32" height="420" align="left" valign="top">&nbsp;</td>
    <td width="90" align="left" valign="top"><img src="images/portf.gif" width="48" height="329"></td>
    <td height="453" colspan="2" rowspan="2" align="center" valign="top"><p align="center" class="style1">ABOUT ME </p>
      <p align="center" class="style1">&nbsp;</p>
      <p align="center" class="style1">&nbsp;</p>
      <p align="center" class="style1">Thank You for visiting.</p>
      <p align="center" class="style1">This site is currently under construction, so not all links will be functional. </p>
      <p align="center" class="style1">Taren Morse </p></td>
    <td height="453" rowspan="2" align="left" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td width="344" height="44">&nbsp;</td>
    <td height="44" colspan="2" align="left" valign="top">&nbsp;</td>
  </tr>
</table>
<!-- whatever content-->
</div>
</body>
</html>

**misson** · 04-25-2009 01:34 PM

Once you get rid of the table, replace the JS rollovers with CSS rollovers and rename "wrapper" to "LoadingPanel", try setting the position of the loading bar panel to "fixed" and give it a high z-index.

IE6 doesn't support fixed positioning. If you want to learn how to fake fixed positioning in IE6, read the Tagsoup article. Note that you can use conditional comments to serve IE 6 the necessary style.

**alwaysdrawing** · 04-25-2009 08:32 PM

Okay, I'm not very familiar with programming. I probably should have mentioned that... Still, I tried to change from the JS to CSS rollovers like you said. However, the images for the rollovers are Giffs, so once the page opens they play once then they switch between only first frame in the images. They don't play as you move across them like they should. Do you know what the problem is?

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN">
<html>
<head>
<title>CSS Rollover Button Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style media="screen" type="text/css">
 .aboutbtn{
  position:relative;
  background-image:  url(images/about_btn_out.gif);
  background-repeat: no-repeat;
  display: block;
  width: 114px;
  height: 57px;
  margin: 0; 
  padding: 0; 
 }
 .aboutbtn a{
  display: block;
  color: #000000;
  width: 114px;
  height: 57px;
  display: block;
  float: left;
  color: black; 
  text-decoration: none;
 }
 .aboutbtn img {width: 114px; height: 57px; border: 0; }
 * html a:hover {visibility:visible}
 .aboutbtn a:hover img{visibility:hidden}
</style>
<body>
<div class="aboutbtn"><a href="http://www.google.com/"><img src="images/about_btn_ro.gif"/></a>
</div>
</body>
</html>

**misson** · 04-26-2009 04:14 AM

The sample you posted works for me with images in place. Post a link to the above as a live page so I can see it with the images you're using.

**xPlozion** · 04-26-2009 10:55 AM

I don't know how well this will apply to you, but you could try ob (output buffer). What this does is catches anything that would be sent out to the user's browser, but instead is caught in a buffer until you let it go.

If you would like to try this, I could show you how to do it, cause at first I didn't understand...

**alwaysdrawing** · 04-26-2009 01:13 PM

mission : Here's the link you wanted : http://morse.elementfx.com/cssrollover.htm

xPlozion : I don't how quickly that will display my site. The sizes of the button images are pretty small so they load up real quickly. The background image, however, takes longer. Because the way I have my site set, I need them all to show up at same the time. So whatever method can do this works for me. I just don't know much programming, so I wouldn't know if your idea is best. If it helps to view my site to see for yourself, here it is : http://morse.elementfx.com/

I also will have larger images and such on other pages, so being prepared for slow loading is a must.

All : Thanks for your help. It's greatly appreciated.

**xPlozion** · 04-26-2009 07:54 PM

not to sound rude, but your site has some serious design flaws. Your site doesn't work if the window is maximized, if you start to enlarge the window, the content slides off the layout, rendering it useless.

If I were you, I would worry more about making it work properly in all browsers and resolutions, and not about how things load (which is kinda a petty thing to worry about).

If you would like to inquire about me fixing your site up so it works on all browsers/platforms, you can PM me and we can workout a deal.

**misson** · 04-26-2009 10:44 PM

Now I see what's happening. You're using animated transitions which, sadly, CSS can't support. The images start playing as soon as they're downloaded and there's no way of controlling the animation. You can stick with the old Dreamweaver MM_* functions for now. They work, despite being inefficient and out of date.

Work on converting the rest of the site to semantic HTML and a CSS based layout. That should help w/ d/l times. As for the loading bar, I'm not so certain that's a good idea. The important stuff should load first & quickly, so visitors can interact with the site even if the whole page hasn't loaded. Visitors do not want to wait, no matter how great the page looks when finally loaded. Reserve loading bars for when the page won't work until fully loaded, not when the page merely doesn't look pretty until loaded.

Once that's taken care of, you can decide if you want to replace the MM_* functions. Since it bugs me more than it bugs you, I'll write the replacement if you want one.

**Teensweb** · 04-27-2009 04:56 AM

"alwaysdrawing" are you new to html and js(or css)?(they are not prgramming, except js)
i think you have been using MS frontpage which does that javascript rollover for you. But believe me they are very messy(if you are using them, I don't know that)
For the loading bar I have one one my site see: http://www.teensweb.co.cc/Login
I can help you with that if you are interested....
Edit:
With the images, the best thing is to make play-once animated gifs...I think!
or else css wouldn't work!(as far as i know)

**alwaysdrawing** · 04-27-2009 01:37 PM

xPlozion:

not to sound rude, but your site has some serious design flaws. Your site doesn't work if the window is maximized, if you start to enlarge the window, the content slides off the layout, rendering it useless.

I thought I fixed that problem... O_o Funny, that's the exact same problem I have when viewing the x10 site (among other problems). Well, at least I managed to fix it on my computer considering I have no clue what the heck I'm doing.

Anyways, don't worry about "being rude" I know I suck at this stuff, and I prefer it when people just flat out tell me instead of beating around it. I sincerely appreciate that comment.

Teensweb:

"alwaysdrawing" are you new to html and js(or css)?(they are not prgramming, except js)
i think you have been using MS frontpage which does that javascript rollover for you. But believe me they are very messy(if you are using them, I don't know that)
For the loading bar I have one one my site see: http://www.teensweb.co.cc/Login
I can help you with that if you are interested....
Edit:
With the images, the best thing is to make play-once animated gifs...I think!
or else css wouldn't work!(as far as i know)

I'm 97% new to everything I'm attempting to do here. Right now I'm using Dreamweaver, but it's proving harder than I thought because of all the "flaws" that keep jumping up and biting me. I'm pretty much learning this stuff as I'm trying to do it... So, yeah, if I sound like I don't know what I'm doing, it's because I don't.

The giff images, however, do only play once. If you have info on a loading bar for future reference, that'd be great.

mission:

Once that's taken care of, you can decide if you want to replace the MM_* functions. Since it bugs me more than it bugs you, I'll write the replacement if you want one.

That would be cool if you would.

Thread: Need help loading a page before displaying it

LinkBack

Thread Tools

Display

Need help loading a page before displaying it

Re: Need help loading a page before displaying it

Re: Need help loading a page before displaying it

Re: Need help loading a page before displaying it

Re: Need help loading a page before displaying it

Re: Need help loading a page before displaying it

Re: Need help loading a page before displaying it

Re: Need help loading a page before displaying it

Re: Need help loading a page before displaying it

Re: Need help loading a page before displaying it

Similar Threads

Loading a Blank Page

Problem Loading Page

Error on loading the New Home Page

Page not displaying

Problem Loading Page

Posting Permissions