jQuery .load() not working on Internet Explorer

This little snippet was being used as a preloader for some large images on a site I was working on:

// Grab the src attribute
var src1 = $("#home-img1 img").attr('src');

// Add the preloading gif
$("#home-img1").css("background-image","url('/images/ajax-loader.gif')").css("background-position","center center").css("background-repeat", "no-repeat");

// Remove the image from the dom
$("#home-img1 img").remove();

// Load then display the image
$("<img />").attr("src", src1).load(function(){
    $(this).css("display","none").appendTo("#home-img1").fadeIn();
});

Which works as you would expect in all browsers, except for our ever redeeming friend internet explorer (ie7-ie8). Internet explorer seems to already treat the image as loaded (even though it’s a new element) and never fires the function in .load(), apparently to Internet Explorer, loading something from the cache doesn’t actually count as loading it. My quick solution to this has been to append a random number to the end of the src1 variable which forces a reload of the image. It’s not a very good solution since I can’t make use of cache, but it fixes the problem.

Thanks Microsoft :-) (assholes)