jQuery IE doesn't fire load event

Question

I'm having an issue when it comes to showing images once they've loaded. The effect I want is to show a loading .gif behind the image and when it's loaded fade it in. The following code works for any images I load in via AJAX, however on page load I'd like the same effect.

$(function() {
    $("#products img").hide().bind("load", function() {
        $(this).fadeIn(300);
    });
});

Note, this works nicely in all browsers except IE (only tested 9). From what I understand it's not firing the load event because either the image is cached or the image has loaded before the event has been binded. I want the browser to cache images so adding a date/time stamp to the end of the image src is not really an option.

Is there a way I can say If the image is already loaded in some form or another, show it. Otherwise hide it and fade it in once it's loaded. If the image is already loaded in some form or another, show it. Otherwise hide it and fade it in once it's loaded. ?

Edit: I tried setting up a fiddle but it didn't really like it. Here it is anyway if it's helpful

Edit

If anyone is interested I've put up a quick js performance test for the two answers.
_{(source: grabilla.com )}

Answer 1

I had the same problem and solved it like this:

 $("#products img").one('load.FadeIn', function () {
     $(this).fadeIn(300);
 });

 $("#products img").trigger('load.FadeIn');

Either image has already been loaded and fades in or we manually trigger the event.

Answer 2

You could add a filter which passes only images which haven't yet been loaded:

$("#products img")
  .filter(function(i, img) { return ! img.complete })
  .hide()
  .bind("load", function() {
    $(this).fadeIn(800);
  });

demo