Issue With Onload Function On Images

[ajmooreuk]

Hi;I'm new here but have been writing HTML & CSS for a few years, but recently decided to try and get into JS.I've hit upon a problem that's bugging me a lot, so am wondering if anyone can help.All I'm trying to do is fade an image out, swap it to another image, then fade the new one in.This is pretty simple and I got that working fine locally.The issue comes when I try to ensure that the new image has loaded before fading up. I don't want to preload every image due to the nature of the way I'm laying out my site - it'd create a pretty big bottleneck when switching to the image gallery. It makes much more sense (to me) to only load on demand.The site is work in progress, but can be seen here: www.alexanderjamesmoore.co.uk/chocolate The page in question is "photography". All I've done thus far is the "architecture" link inside that as I'm trying to get all the code working properly before worrying about content & layout too much.The bit of code that's causing issue is this:

		   if (objOpacity == 0)	{		// as we're now faded out we can swap the images over    		document.getElementById('imageviewer').src=archImages[i];    		// wait until the picture is loaded before fading back up;    		document.getElementById('imageviewer').onLoad = loadFinished();	}

This is inside my fade function which recurses itself down through the opacity & gets called at the right time.The problem is that the onLoad fires before the new image has actually loaded in, which makes the object fade up & then snap to the new image.I've tried sticking the onLoad all over the place, using a dummy object instead, and a few other things that I've now lost track of, none with any luck.If someone can help that'd be great!Cheers

[chibineku]

Add a test for the presence of the image first, for example:if(document.getElementById('imageviewer')) {code here}That way, if the image isn't loaded yet, your function won't start. If you are calling the function recursively, then it will eventually pass this test and your code will work. I think...

[ajmooreuk]

Thanks for the reply; sorry for delay - busy work at the moment!Not sure that'll work because imageviewer is always showing something, so it's always got something loaded. Unless there's a way I can unload an element? I might try it with a local dummy image for the preload though, can't hurt to try.

[ajmooreuk]

Hmm. Nope, that didn't work.I did however find something that did:

dummyImage.addEventListener('load', loadFinished, false);

Except not on IE :)Grrr.

[Ingolme]

In Internet Explorer you have to add the onload event handler before changing the src attribute.addEventListener() doesn't work in Internet Explorer. Internet Explorer uses the attachEvent() function instead.

[ajmooreuk]

addEventListener() doesn't work in Internet Explorer. Internet Explorer uses the attachEvent() function instead.

Yeah I saw that just after posting but it was too late to mess about on a hobby :)Anyway, /wipes brow, finally got this working (tested on Safari, Firefox, Chrome & IE8):

				//create an image to check preload intodummyImage = new Image();	//do a quick browser check because IE does things a different wayif (navigator.appName=="Microsoft Internet Explorer")	{		dummyImage.attachEvent('onload', loadFinished);    		dummyImage.src = archImages[i];	}else	{    		dummyImage.addEventListener('load', loadFinished, false);    		dummyImage.src = archImages[i];	}

I did try the .onLoad before setting the .src previously, I'm still at a loss as to why it fired early on all browsers. Anyway, I can get on with layout now rather than spending so much time on a nice but superfluous effect!