fadein a image when loaded

fadein a image when loaded

hi there, i'm kind of stuck with the following problem:
i have a few thumbnails which are loaded and displayed large, when the mouse is over the thumbnail.
the html markup looks like that:

  1. <a href="bigimage.jpg"><img src="thumbnail.jpg" /></a>

i have set up a plugin which uses hover() to get a mouseover/mouseout-behaviour to the <a> like that:

  1. $('a').hover(showBigImage, hideBigImage);

so far so good.

since the big images might take a few seconds to load, i show a loading-animation and wait for the .load()-event to trigger. when the load-event finally triggers i hide the loading-animation and fade in the big image. works all fine, as long as my cursor is resting over the current thumbnail.

BUT: now i move the mouse away from the current thumbnail, BEFORE the load-event was triggered.
what happens now is, that the big image will still fade in because the load-event will still be triggered. but i don't want the big image to fadein now, since my cursor has moved to another thumbnail...

so, how do i prevent the load-event from being triggered, when meanwhile my mouse has moved to another thumbnail?

i hope you get my question :) thanks for all hints!