image preloader not working in IE

I have the following code to preload images:

preloader : function(images) {
        var imgCount = images.length;
        var counter = 0;
        $.each(images, function(i, n) {
            alert('hi');
           // load each image
           $("<img />").attr("src", n).load(function() {
               counter++;
               if(imgCount == counter) {
                   $('#loader').hide();
                   $('#wheel').show();
               }
           });
        });
    }

which I'm calling like so:

preloader(['../images/image1.png','../images/image2.png','../images/image3.png']);

It works fine in firefox but in IE it doesn't work. I get all 3 alerts back so the each loop runs but it only ever loads the first image. If I out just one image in the array I get in to the fina开发者_StackOverflow社区l if statement and the div's are shown and hidden. But any more than one image and Ie trips up. As i say this works fine in FF so it's not a problem with paths to images or images missing etc.

Any idea? I'm really stumped on this.

Someone with the same problem explained in detail:

http://www.mattfarina.com/2007/02/01/preloading_images_with_jquery

You need to extend the life of the img element until the images have actually loaded.

I've always used this fantastic plugin : http://flesler.blogspot.com/2008/01/jquerypreload.html

$.preload([ 'red', 'blue', 'yellow' ], {
    base:'images/colors/',
    ext:'.jpg'
});

Besides the fact that it is well coded - there are issues with preloading images in ie that this plugin deals with.