Image onload after clicking on thumbnail (Gallery application) [Archive]

robard

04-30-2005, 08:44 PM

I am developing a web site (www.sceneshifts.com) and I would like to know when an image has loaded. The user clicks on a thumbnail and that calls a javascript function which loads the image. I have tried all kinds of code combinations - for example:

function LoadImage(pic)
{
myimage = new Image();
myimage = pic;
myimage.unload;
myimage.onload = SomeFunction(myimage);
document["mainPicture"].src = myimage;
}

mainPicture is preloaded from the html form. What happens is that the SomeFunction function gets called immediately, not after myimage has loaded. Can you help?

MikeFoster

05-01-2005, 10:02 PM

Hi robard, Welcome to CodingForums,

You don't have to create a new Image object - just assign the new url to the img element's src attribute:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type='text/javascript'>

window.onload = function()
{
LoadImage('mainPicture', 'ban_ner.jpg');
}

function LoadImage(img_id, img_url)
{
var i = document.getElementById(img_id);
i.onload = img_onload;
i.onerror = img_onerror;
i.src = img_url;
}
function img_onload()
{
alert("The image has loaded.\n" + this.src);
}
function img_onerror()
{
alert("The image failed to load.\n" + this.src);
}
</script>
</head>
<body>

<p>
<img id='mainPicture' href='test'>
</p>

</body>
</html>