onload issue

kelkadir · #1 (**permalink**) 03-26-09, 10:58 AM

Hi everybody.

the onload event handler is used to "invoke JavaScript after the page or an image has finished loading."

I need an event handler or an idea on how to "invoke JavaScript as soon as the page or an image starts loading." The event should stop once the page or image has stopped loading

Thanks in advance for your suggestions

Simon

Shto · #2 (**permalink**) 03-27-09, 04:06 AM

Hi Simon.

I am not sure if that is possible. Then again, maybe if you tell us in more detail over what you want to do, we could help more.

What I think you can do is: before the image tags make some dummy empty span tags and just attach an onload event to those. Then, when the span tag completes loading, the event would be triggered before the image tag is loaded.

About the page, you could just put a <script></script> area before the <body> tag. Since the page loads from upper code lines to lower code lines, it should go through the javascript before it reaches the <body> tag.

Hope this helps.

de.monkeyz · #3 (**permalink**) 03-28-09, 09:09 AM

Your description of what you want technically isnt an event. As you said it would stop when its loaded. But events only fire the once, not over and over until something else happens.

If you wanted something to occur every so often until the page is loaded you could make an interval for a function, and then remove it on the image or page load.

wirehopper · #4 (**permalink**) 03-28-09, 10:23 AM

Code:

<html>
<head>
<script type="text/javascript">
alert ('Started loading page');
function loaded(e)
{
alert('Image loaded');
}
</script>
<title>Title</title>
....
</head>
<body>
<p>
<img id="imgId" src="blank.gif" onload="loaded(this)" />
</p>
</body>
</script type="text/javascript">
alert ('Setting the src of the image');
document.getElementById('imgId').src='image.gif';
</script>
</html>

kelkadir · #5 (**permalink**) 03-28-09, 11:18 AM

Thank you for the code abode. Trying it......

kelkadir · #6 (**permalink**) 03-28-09, 11:20 AM

Thanks for the code above. It is getting me nearer.
Here is the link to what I would like to do

http://mayamundotours.com/test.php

The animated jpg is showing as soon as the page starts loading which is great, because this is exactly what I need. However, I would like this animated jpg to disppear as soon as the page has finished loading.

Is there a way to do the following:
"on unload (or when the page has finished loading), erase the content of document.write () so that the animated jpg stops showing"?

here is the current code,

HTML Code:

<html>
<head>
<script type="text/javascript">
document.write ('<img src="http://www.mayamundotours.com/ajax-loader.gif" border=0>');
function loaded(e)
{
alert('Image loaded');
}
</script>
<title>Title</title>
....
</head>
<body>
<p>
<img id="imgId" src="1.jpg" onload="loaded(this)" />
</p>
</body>

Thank you in advance

Simon

UnrealEd · #7 (**permalink**) 03-28-09, 11:39 AM

Have you tried hiding the image?

kelkadir · #8 (**permalink**) 03-28-09, 04:20 PM

I tried the following to hide the image, but it unfortunately doesn't work

HTML Code:

<html>
<head>
<script type="text/javascript">
document.write ('<img src="http://www.mayamundotours.com/ajax-loader.gif" id="theimage" border=0>');
function loaded(e)
{
document.getElementById(theimage).style.display = "none";
}
</script>
<title>Title</title>
....
</head>
<body>
<p>
<img id="imgId" src="1.jpg" onload="loaded(this)" />
</p>
</body>

Any suggestion are greatly appreciated

kelkadir · #9 (**permalink**) 03-28-09, 06:48 PM

Just in case it could be of interest to the public, I solved the issue by doing this,

HTML Code:

<html>
<head>

<title>Title</title>

</head>
<body>
<p>

<img src="http://www.mayamundotours.com/ajax-loader.gif" id="theimage" border=0>

<img id="imgId" src="1.jpg" onload="loaded(this)" />
</p>
</body>

<script type="text/javascript">

function loaded(e)
{
document.getElementById('theimage').style.visibility = 'hidden';
}
</script>

</html>

I find this is a good practice to avoid that your site visitors don't just click away if your pages take long to load!

cheers
Simon