Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Help with figuring out why certain aspect of page loads slow?

Status
Not open for further replies.
CL328

CL328

MIS
May 19, 2002
25
0
0
US
hello,

I have this page, excuse the url... just a testing spot...

Did you notice the top menu bar, in the middle... it is the last thing to load up. WHY?
The whole page is very slim (may be only 40 kb total)!!
It happens on all the pages.

THIS is bugging me and I've wasted many hours trying to solve the problem.

Right now, the top menu bar is designed as so:

a table row, split into 3 cells
1st cell is the corner piece (a background image for the cell)

2nd cell is another background image VERY Small, only like 5 pixels wide... this is a background so it fills up the entire table cell.

Also, in this cell are the image buttons... obviously, they are the same color, as the background image.

3rd cell is just filler, so the buttons don't go all the way to the edge.

I'm at a complete loss!!!!

any ideas why its the last thing to load up?
I've designed many sites and this never came up before????

MANY thanks for your help

-Larry


Looking for personal email domains, simple web hosting name hosting... Compare our "Service" and prices:
 
Sort by date Sort by votes
If you run the page through , you'll see it comes in a shade under 50KB.

I don't see too much of a problem - but I'm on a fast connection here, it might show up on a dial-up modem. I don't think there's much you can do about it - the order in which images are loaded by the browser is pretty much outside your control.

You could ditch the images for the menu items altogether and replace them with ordinary text styled with CSS. You'd lose the nice drop shadow under the letters though (actually there's an IE-only way of doing them described in faq215-3207 - but they're not as nice).

-- Chris Hunt
 
Upvote 0 Downvote
The bit I'm waiting for is at the very top of the page in the centre (between the logos for "Austin WIndow Fashions" and "Window Fashions Of Texas") rather than anything directly to do with the menus, right?

Assuming I'm looking at the right thing, it's a Flash movie and, you're right, it takes forever to load (I've been waiting over 3 minutes now on a LAN/Kilostream connection and it still hasn't shown up).

Do you really need this movie? Anything that takes this long to load is just a waste of bandwidth as most visitors will have clicked onto their next page before it appears. If you want to keep it, either add a preloader so that visitors know there's something happening or squeeze the file size as much as you can.

By the way, it's now been over 5 mins and the movie still hasn't started. If this was a cinema, I'd be asking for a refund!!!
 
Upvote 0 Downvote
It looks like the path may be wrong for the flash movie.
putting "window-blinds.swf" into the address bar 404s out.


Chris.

Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems

So long, and thanks for all the fish.
 
Upvote 0 Downvote
If you don't care how long it currently takes to load the page and are just frustrated at the order in which everything shows up, a "solution" could be to put the whole page inside a DIV tag with the style attribute set to visibility:hidden. Then, using the BODY tag's ONLOAD event, set the DIV tag's visibility to 'visible'.

You could even have a little "Loading..." message going. Something like this:

Code: 
<html>
<head>
<script>
var loaded = false; [b]//changes with BODY tag's ONLOAD event.[/b]
var timeoutObject;
function loadingMessage()
{
 if(!loaded)
 {
  [b]//Message will appear to keep adding dots until it reaches 5 dots, then it will reset to one dot and keep going.[/b]
  if(loadingDiv.innerHTML != "Loading.....")
   loadingDiv.innerHTML += ".";
  else
   loadingDiv.innerHTML = "Loading.";

  timeoutObject = setTimeout("loadingMessage()", 500);
 }//end if
 else
 {
  clearTimeout(timeoutObject);
  loadingDiv.innerHTML = ""; [b]//erase loading message[/b]
  pageDiv.style.visibility = "visible"; [b]//show page[/b]
 }//end else
}//end function loadingMessage()

function loaded()
{
 loaded = true; [b]//will kill the loadingMessage()-timeout-loop[/b]
}//end loaded()
</script>
</head>
<body onload="loaded();'>
<div id="loadingDiv">Loading.</div>
<script>
loadingMessage(); [b]//starts message as soon as DIV is drawn (above)[/b]
</script>
<div id="pageDiv" style="visibility:hidden">
...
</div>
</body>
</html>

Will something like that help?

--Dave
 
Upvote 0 Downvote
thanks all...

well, the flash movie is ONLY 30kb.
On the server, I changed the name of the flash file so it would not pull it up :)

I'm on a fast cable modem, but I see the "blank" in the top bar menu... and that KILLS me...
it just looks SO BAD.... you know what I mean.

I will change the name of the flash movie... so it loads...
but that can't be the cause :(

I think it has to do with background images in the table cell vs. just a plain image in the cell.

the 3 issues about the top menu bar:
1) I want the dropdown shadow
2) I want it to always be 100%
3) I want it as fast as possible
4) I don't want to change the look...

AHHHHHHHHHHHHH crap!!!!!!!!!!!!!!!!

I know the answer now.. just hit me....
I will post the new page design in a bit....
it takes more work to get... BUT it will solve all my issues...

THANKS for helping me think :)

Looking for personal email domains, simple web hosting name hosting... Compare our "Service" and prices:
 
Upvote 0 Downvote
check it out now :)

there are a few things I can tweak (gif vs. jpg) AND I could do the same thing for the left side bar that I did for the top one....

but that just takes longer :)

Actually... IT would be even better and I eventually will do that to the left side :)

anyway..
thanks

NOTE: I will be deleting the page soon, so if you don't see it... that's what happened

Although... I already copied over the previous version (stupid me)... it would have made a GREAT case study... to show what happens in web design when you go that "extra" mile to get the perfect look!!

thanks

Looking for personal email domains, simple web hosting name hosting... Compare our "Service" and prices:
 
Upvote 0 Downvote
Don't know what you did, but it didn't seem to make a lot of difference - I'm at home on my dialup now, and there's still a longish delay while the images are downloaded.

I really don't think there's anything you can do about it - within the (reasonable) constraints you've set yourself. A minor improvement would be to include [tt]height[/tt] and [tt]width[/tt] attributes for all your <img> tags, so the browser knows how much space to leave for them. Another would be to add [tt]alt[/tt] text so there's something there while the image loads (it's good accessibility practice anyway). So instead of:
Code: 
<a href="about-window-fashions.html"><img src="img/about.gif" border="0"></a>
you have
Code: 
<a href="about-window-fashions.html"><img src="img/about.gif" border="0" [b]height="20" width="69" alt="About Us" title=""[/b]></a>

-- Chris Hunt
 
Upvote 0 Downvote
To add my two cents to the whole discussion.

It is the nature of web browsers to display background images last, because they are considered least important of all the page elements. There is really nothing you can do about that. If I were you, I would be more concerned by the fact that your page layout breaks in Mozilla in resolutions higher than 800x600. It least it does for me.

There is, however, one way of reducing the effect of waiting background image to load. Try setting a background color that is similar to your background image. This way, users will see that color while they wait for the image to load. It's not perfect, but usually gives much better result than regular white background while loading.
 
Upvote 0 Downvote

>> It is the nature of web browsers to display background images last

Cool - I didn't know that. I had assumed that images loaded in source order.

Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
212
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
62
lmcate
lmcate
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
327
spamjim
spamjim
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
41
CoolBreeze007
CoolBreeze007
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
88
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top