Need a diversion for a slow loading index page

@drumzFeb 06.2008

One of my clients has a huge index page (150K) that they would like a diversion while the page loads. I suggested a redesign but they don’t want to go down that road right now. I was thinking of doing an onload but not sure how do I tell the onload (gif?) to stay up for 10 seconds?
Any other ideas are most appreciated.
Thanks!

to post a comment

HTML

18 Comments(s) _↴

@jasonahouleFeb 06.2008 — #What is in the page that makes up the majority of that 150k? Is this flash or something?

@drumsFeb 06.2008 — #First a disclaimer, I didn't design it.

It's mainly graphics on top of a backend data pull from another server.

@jasonahouleFeb 06.2008 — #So it is the graphics that are causing the slow load time? Why not optimize the graphics then?

@drumsFeb 06.2008 — #That's my next step but there are about 20 of them so was thinking of trying something else.

@yamaharussFeb 06.2008 — #You could use javascript to display a "loading...." message in a div onload, place the rest of the content in another div using setTimeout to wait N seconds before showing it and hiding the loading message.

Of course, the best route is to optimize the page. Most people won't wait for a page to load.

@jasonahouleFeb 06.2008 — #The images definitely need to be optimized, at the very least. Another thing you could do is load the images last. You can do so with Javacsript. Use the onload event to make calls for the images.

@drumsFeb 06.2008 — #I optimized the images and it only took off 5k.

Can you give me an example of the javascript and setTimeout?

@drumsFeb 06.2008 — #They actually want the images to load first. It's a real estate site that has backend home (default) search data that takes the most time to load. I was thinking maybe a image preload but that might not help either.

I like yamaharuss idea but not sure how to do it.

@yamaharussFeb 06.2008 — #You would need to wrap your content in a div, then create a hidden div with positioning that will center it.

Then in your onload event, call two separate functions. one to show the main stuff after N seconds, the other to show/hide your loading message at the right time.

onload..

showhideMessage():

setTimeout ('showContent()',5000):

setTimeout ('showhideMessage()',5000):

@drumsFeb 06.2008 — #The content is already wrapped in a div called container. And I'm still a bit unsure about the syntax.

So my onload should be:

<body onload="showhideMessage(Loading...);setTimeout ('showContent()',5000); setTimeout ('container()',5000); setTimeout ('showhideMessage()',5000)">

And how do I make the message?

Thanks much for your patience!

@yamaharussFeb 06.2008 — #I would just call everything from an onload function instead of writing it all in the body tag.

<div id="loadingDiv"></div>

You'll need to set the location and display values via your CSS. ("none" for your container and "block" for your loading message)

Then use a similar function for both ... something like:

function showContainer(){

document.getElementById('container').style.display = :block";

}

Do the same for the loading message and write the message using innerHTML

@drumsFeb 06.2008 — #Man, this is way beyond me. I hate to be a pain but I am not sure how to do this.

CSS:

[CODE]
 div.loading {
 do I put the setTimeout stuff in here just like you wrote?
 }
 
 div.container {
 width: 1051px;
 margin: auto;
 }
 [/CODE]

HTML:

[CODE]<div id="loadingDiv"></div>
 
 [/CODE]

@yamaharussFeb 06.2008 — #No, CSS is separate.

[CODE]<script type="text/javascript">
 
 function hideMessage(){
 document.getElementByID('loadingDiv').style.display="none";
 }
 function showContainer(){
 document.getElementByID('container').style.display="block";
 }
 
 function init(){
 document.getElementByID('container').style.display="block"; //hides container
 document.getElementByID('loadingDiv').innerHTML="loading...."; //displays loading
 setTimeout("hideMessage()",5000); //hides loading message in 5 seconds
 setTimeout("showContainer()",5500); //makes container visible in 5.5 seconds
 }
 
 </script>
 [/CODE]

[CODE]<body onload="init();">
 <div id="loadingDiv"></div>
 [/CODE]

You need to add the loading div to your CSS

[CODE]#loadingDiv{
 position:absolute
 top:400px; // or whatever
 }[/CODE]

This is quick and dirty and untested but should get you headed in the right direction.

Russ

@drumsFeb 06.2008 — #You are an angel!

It is giving me a script error message "Object doesn't support this property or method" Line 26, Char 1

Line 26: document.getElementByID('container').style.display="block"; //hides container

It looks Ok to me but what do I know...

@WebJoelFeb 06.2008 — #dynamicdrive.com has scripts for things like this. A 'page loading' status-bar thingie, -indicating that there is a process at work. Diversionary of course.

I think the script/s are in the "document effects" section at DD

@yamaharussFeb 06.2008 — #sorry, that should be double quotes

document.getElementByID("container").style.display="block"; //hides container

@drumsFeb 06.2008 — #I ended up grabbing the affects from Dynamic Drive. Works great.

Thanks to all for you excellent help!!!

@kelly23Feb 07.2008 — #Should have been: "document.getElementByI[b]d[/b]" not "document.getElementByI[b]D[/b]".

Also in #HTML _↴

Table spacing dynamic table elements.How to include Hindi characters in webpage ?

Success!

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

Tweet This

Need a diversion for a slow loading index page

18 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Need a diversion for a slow loading index page

18 Comments(s) ↴

Also in #HTML ↴

Success!

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

Social

Version

18 Comments(s) _↴

Also in #HTML _↴