Log in

View Full Version : onload image


chechu
03-03-2008, 02:23 PM
Hey all,
I have a site that takes about ten seconds to load, so I'd like to display an image or text while the page is loading, but then the image or text need to disppear when the content is loaded. How can that be done ?
The site is http://www.hetbestevoordeel.be
chechu
03-04-2008, 08:02 PM
Can anyone help me please. Now it takes so long to load the page that, as there is no message that tells them to hold on, visitors think the site is not online anymore.
I am losing money, please help !
Master_script_maker
03-05-2008, 03:32 AM
look at an ajax loader. i believe there is one in dynamic drive. you could modify ajax tabs content script (http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm). you could get a loading icon from here (http://www.ajaxload.info/)
chechu
03-05-2008, 07:39 AM
I got the loading icon, but what script do I have to place, so the icon comes up when opening the site and disappears when the content appears ? Thanks !
chechu
03-05-2008, 07:48 PM
As you said I should be looking for an ajax loader, I found this:
http://javascript.internet.com/ajax/ajax-loader.html
but honestly, I do not understand what to do with it.
Can anyone help me out, please ?
chechu
03-06-2008, 12:43 PM
Code exploiter suggests this site: http://developer.yahoo.com/yui/examp...l-loading.html
How can this be implemented to my site problem ?
chechu
03-09-2008, 08:24 AM
Anyone, please ?
chechu
03-14-2008, 02:04 PM
getting desperate ...
BYK
03-14-2008, 02:49 PM
You can create and put an overlay div which indicates that the page is loading and place a function to the body element's onload which removes this div.

body.onload is fired when the page is completely downloaded, including the images.

I think this is waht you are asking for?
Nile
03-14-2008, 02:52 PM
Ehh?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#loading{
position: absolute;
top: 5px;
right: 1px;
color: #FFF;
background: #417EAF;
font-family: arial;
padding: 3px;
}
</style>
</head>
<body onload="document.getElementById('loading').style.display = 'none';document.getElementById('content').style.display = 'inline';">

<div id="loading">Loading...</div>
<div id='content' style='display:none;'>
<img src="http://www.dynamicdrive.com/forums/image.php?u=11077&dateline=1168681090" />
</div>
</body>
</html>
chechu
03-14-2008, 03:50 PM
A it confusing. Do I need to place the first code ?
What is the php for ? And where would I have to place it ?
Nile
03-14-2008, 04:00 PM
Theres no php, thats just your avatar... Look(Im leaving comments)
You need to add this to your style:

#loading{
position: absolute; //Makes it top of everything
top: 5px; //position
right: 1px; //position
color: #FFF; //font-color
background: #417EAF; //this is just the background of it, you can switch it to an image
//if you want
font-family: arial; //font
padding: 3px; //padding
}
This changes your onload(body):


onload="document.getElementById('loading').style.display = 'none';document.getElementById('content').style.display = 'inline';"

These are the extra divs that you need to add after the <body> tag:


<div id="loading">Loading...</div>
<div id='content' style='display:none;'>

There, its that simple. ;)
If your still confused just tell me... :D
chechu
03-14-2008, 04:05 PM
<div id='content' style='display:none;'>
Thanks so much !
What is this div referring to ?
Nile
03-14-2008, 04:12 PM
What this is doing is its clearing everything in that div, so before you end your body tag:


</body>

You need to put:


</div>
Before it.
So you should have this at the bottom of your page:

</div></body></html> And then when the page loads its giving a inline display. :)
chechu
03-14-2008, 04:27 PM
<div id='content' style='display:none;'>
I didn't place this piece of code, and it still works
see at http://www.hetbestevoordeel.be
I learned that this code means there should be a "content" id that it refers to, but as there is nowhere a "content" in the style, then what does it refer to ?
chechu
03-14-2008, 04:28 PM
inline display
what is an "inline display" ?
Nile
03-14-2008, 04:37 PM
Well, what that code did was it deleted everything on the page, and then when everything was ready it woukld display.. Soo I would put it there and then </div> before </body>
Display: inline, is text...
chechu
03-14-2008, 04:38 PM
Thanks so much for your effort !
Nile
03-14-2008, 05:32 PM
The only thing I suggest it centering the loading thing... :-/
Hmm, and also change:


<body onload="document.getElementById('loading').style.display = 'none';document.getElementById('content').style.display = 'inline';">

To:

<body onload="document.getElementById('loading').style.display = 'none';">

If your not putting <div id='content' style='clear:both'> after <body> and </div> before </body>
It just makes it validate.
chechu
03-14-2008, 05:39 PM
The only thing I suggest it centering the loading thing... :-/
I think it is ??

I did place

<div id='content' style='clear:both'> after <body> and </div> before </body>
so I can keep the below code ?

<body onload="document.getElementById('loading').style.display = 'none';document.getElementById('content').style.display = 'inline';">
Nile
03-14-2008, 05:43 PM
Yup. :D

I think it is ??
Although your loading picture is not centered...
chechu
03-14-2008, 05:43 PM
This is what I have now, and it works perfectly:

<style type="text/css">
#loading{
position: absolute;
position: middle;
color: grey;
background: #ffffff;
font-family: arial;
}
</style>

</head>

<body onload="document.getElementById('loading').style.display = 'none';document.getElementById('content').style.display = 'inline';">

<div id="loading" style="padding-top:50px;">
<p align=center><img src="imgs/logo.jpg" style="border: 0px;">
<p align=center>De pagina is aan het laden.<br>Dit duurt ongeveer 10 seconden.<br>Even geduld, aub.
<p align=center><img src="imgs/loader.gif" style="border: 0px;">
</div>
<div id='content' style='display:none;'>
//content
</div>
</body>
Nile
03-14-2008, 05:45 PM
Ok, then keep your code. :D
chechu
03-15-2008, 08:51 AM
Do you not see the onload content centered ?
I do ?!?