image OnLoad event not working as I expect

sorvad · 08-02-2012, 07:51 PM

I've been writing some code that uses html 5 canvas and it's required to cache images first, however something wasn't working right, so I cut it down to a test sample and it still doesn't work as I expect, here's the full web page test code;

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="javascript">
	var img=new Image();
	img.onLoad = function() {alert("Loaded")};
        img.src =  "http://cti.itc.virginia.edu/~bcr/Labs/Kota_Reliquary.GIF";
</script>
<body>
<img src="http://cti.itc.virginia.edu/~bcr/Labs/Kota_Reliquary.GIF" />
</body>
</html>

I expect the "alert" message to appear when the image has been loaded, but it never does. What stupid mistake am I making ? The image is included on the page just to ensure it's still there on the website in question.

WolfShade · 08-02-2012, 08:11 PM

The JS is executed between the </head> and <body> tags. What happens if you move the script to within the <body></body> tags?

sorvad · 08-02-2012, 08:13 PM

Done the change as follows:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script language="javascript">
	var img=new Image();
	img.onLoad = function() {alert("Loaded")};
    img.src =  "http://cti.itc.virginia.edu/~bcr/Labs/Kota_Reliquary.GIF";
</script>
<img src="http://cti.itc.virginia.edu/~bcr/Labs/Kota_Reliquary.GIF" />
</body>
</html>

Unfortunately no difference.

WolfShade · 08-02-2012, 08:52 PM

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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">        
function newSource() {
alert("Loaded");  
img = document.getElementById("newImage");
img.src =  "http://cti.itc.virginia.edu/~bcr/Labs/Kota_Reliquary.GIF"; 
}
</script> 
<title>Untitled Document</title> 
</head> 
<body> 
<img id="newImage" onload="newSource()" /> 

</body> 
</html>

Untested.

sorvad · 08-02-2012, 09:35 PM

Thanks for the reply. Two things, that won't work as the onload set in the image tag will never fire as there is no "src" in the tag and you only load the src attribute when the onload fires, so kind of a catch-22.

But I see you were trying to work with the image on the document as a solution. I should point out that that it is there just for reference. My actual full code does not use any image tags, all images are loaded programmatically in a very similar way to the example where I set the onload function programatically and then set the src property, like this;

Code:

    var img=new Image();
    img.onLoad = function() {alert("Loaded")};
    img.src =  "http://cti.itc.virginia.edu/~bcr/Labs/Kota_Reliquary.GIF";

The image on the page is just so people can see that the actual src link is valid. In my full project I'm actually loading many graphics for rendering on a HTML 5 canvas object. By caching them to memory I can plot them on the canvas in any way I please, just as you would do when coding for a game. But I must ensure that all images are loaded correctly before trying to plot them to canvas, hence the code to detect when an image has been loaded.

sorvad · 08-02-2012, 09:56 PM

OK, I've solved this, this code works

Code:

    var img=new Image();
    img.setAttribute("onload","alert('Loaded')");
    img.src =  "http://cti.itc.virginia.edu/~bcr/Labs/Kota_Reliquary.GIF";

The only difference is the img.setAttribute("onload","alert('Loaded')"); line. The thing is I've seen my original example code recommended on many many sites but I just couldn't get it to work properly on the two browsers I tried which were Google Chrome and IE 9. I'm happy it works now but still a bit puzzled.

AndrewGSW · 08-03-2012, 08:31 PM

Maybe if the image is already in the browser's cache it doesn't trigger the onload event(?).

Try clearing the cache or use a different image temporarily.

Added: JavaScript is case-sensitive:

Code:

img.onload = function() {alert("Loaded")};