[thelist] image.onload not firing in IE

[Barney Carroll]

Hi guys, a while back I asked for a site check on a gallery site I
should've launched a week ago [http://barneycarroll.com/amc3]. One of
the mission-critical problems that remains is that loading new images
fails in IE under certain circumstances.

Specifically, if you go to the site and click rewind, fast-forward or
play, new images will load and display when ready as expected on all
browsers. I created a little function to extend jQuery that uses
mundane JS (so shouldn't be a case of debugging elaborate recursive
jQuery functions) to see if a new image has loaded and then callback
the necessary functions to display it and manipulate other page
variables accordingly:

$.fn.imgLoad = function(src,callback){
  return this.each(function(){
      var newImg = new Image();
      newImg.src = src.replace('&', '&');
      this.appendChild(newImg);
      newImg.onload = callback;
  });
}

However when you change galleries (click on nature, people or
machines), IE (6 through 8) fails to register the image onload event,
or at least, the callback isn't triggered. As far as I can tell from
debugging all the necessary variables and parameters are being parsed
fine - the image IS THERE, the DOM inspector and the JS debugger show
all the manipulations as having succeeded, and at the same time IE
doesn't show any JS errors.

I appreciate the JS around this is pretty hairy, but I would be
extremely grateful anybody with a bit of spare time and any insights
into IE's DOM interpretation venturing any suggestions as to what I
should be looking for - I'm utterly stuck on this.


Regards,
Barney Carroll
Web designer & front-end developer

web: www.clickwork.net

mobile: +44 (0) 7594 506 381
home: +44 (0) 118 975 0020

twitter: @barneycarroll