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. you could get a loading icon from here

**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?

Code:

<!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>

Thread: onload image

Thread Tools

Search Thread

onload image

The Following User Says Thank You to Master_script_maker For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions