Need help loading a page before displaying it

A

alwaysdrawing

New Member
Messages
7
Reaction score
0
Points
0
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"
"[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">
<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>
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
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.
 
A

alwaysdrawing

New Member
Messages
7
Reaction score
0
Points
0
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="[URL]http://www.google.com/"><img[/URL] src="images/about_btn_ro.gif"/></a>
</div>
</body>
</html>
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
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

xPlozion

New Member
Messages
868
Reaction score
1
Points
0
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...
 
A

alwaysdrawing

New Member
Messages
7
Reaction score
0
Points
0
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

xPlozion

New Member
Messages
868
Reaction score
1
Points
0
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.
 
Last edited:
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
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

Teensweb

New Member
Messages
352
Reaction score
1
Points
0
"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)
 
Last edited:
A

alwaysdrawing

New Member
Messages
7
Reaction score
0
Points
0
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.
Click to expand...

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. :biggrin: 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)
Click to expand...

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. :biggrin: 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.
Click to expand...

That would be cool if you would.
 
Teensweb

Teensweb

New Member
Messages
352
Reaction score
1
Points
0
"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."

In my opinion, Microsoft frontpage is much better for learners at least. Consider using that.

"I'm pretty much learning this stuff as I'm trying to do it... "

Same here, i dint learn it formally, just practice(2 yrs of that). But still I maybe a beginner too(but a good one I hope). So best of luck with learning stuff.

"The giff images, however, do only play once. "

You said you don't know what you are doin, but do you know what you are saying? The gif images play on forever unless you specify that in your animation software like photoshop or something.

"If you have info on a loading bar for future reference, that'd be great."

Did you see that page mate? It does exactly what you want - With a javascript. It shows a loading bar until the page is loaded and displays the page only after that. Do you need that script? Then I'll be able to help you.
And you said something about x10's site not being correctly positioned. That's not possible, which browser are you using? And is it the main site or the forum?

And this is just an advice(only optional):

Please copy your code and check if it's valid html by going to http://validator.w3.org/ and selecting direct input. That'll help you with minor positioning bugs and browser compatibility.
Edit:
I have not checked that with my site though. But i think I should do that for my new sites
 
Last edited:
Teensweb

Teensweb

New Member
Messages
352
Reaction score
1
Points
0
"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."
Click to expand...

It's for the homepage, so loading bar is not a bad idea. And also, your page is not that large, so it should work fine...
 
Last edited:
You must log in or register to reply here.
Top