Jump to content

Issue With Onload Function On Images


ajmooreuk
 Share

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Edited by Ingolme
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...