jquery script doesnt work in ie

when i click on thumbnails, this script change the link and image path of the big picture, it works fine in all the browsers, except for ) IE

    $('.image').click(function(event) {
    event.preventDefault();
    var imagePath = $(this).attr("href");
    var newImg = new Image;
    newImg.src = imagePath;
    newImg.onload = function(){
        $('#big_picture2').hide();
        $('#big_picture2').attr('src', imagePath);
        $('.product_image_large').attr('href', imagePath);
        $('#big_picture2').fadeIn('slow');
    };
});

the html looks like this:

<a href="/documents/product/#GET_IMAGE_BIG.path#" id="thumb1" onclick="return hs.expand(this, { slideshowGroup: 1 } )" class="product_image_large"><img src="/documents/product/#path#" id="big_picture2" border="0" /></a>

<a href="/documents/product/#get_product_images.path#" class="image"><cf_get_server_file output_file="product/#get_product_images.path#" title="#get_product_images.detail#" output_server="开发者_如何学JAVA#path_server_id#" output_type="0" image_width="45" image_height="41"></a>

dont get disturbed by cf_get_server_file this is just dynamic cold fusion code, it works fine.

Not sure whether this solves the whole problem, but you are setting the onload event after defining the src property. That is calling for trouble. Do it the other way round.

onLoad will not trigger in IE if the image is allready cached, try checking for the complete attribute which IE will add when the image is loaded.

newImg.src = imagePath;
var fadeIn = function(){
    $('#big_picture2').hide();
    $('#big_picture2').attr('src', imagePath);
    $('.product_image_large').attr('href', imagePath);
    $('#big_picture2').fadeIn('slow');
};
if($(newImg).attr('complete'))
{
    fadeIn();
}
else
{
    newImg.onLoad = fadeIn
}

Add $(document).ready() around.