Question

I have the following code I am using for a photo gallery. In Internet Explorer 7 & 8 the gallery stops working. The image fades out after several clicks and the new image does not fade in. After this occurrence happens (about 6 or so clicks) the gallery does not function at all. All other browsers work flawlessly. I have also used this code in several other pages with no problems.

    $("#list-image-carousel").find('a').click(function(e) {
        e.preventDefault();
        var src = $(this).attr("href");
        $("#main-img").find('img').fadeOut(400,
        function() {
            $("<img/>").attr("src", src).load(function() {
                $("#main-img").find('img').attr("src", this.src).fadeIn(400);
            })
        })
    });    

Any ideas are greatly appreciated. Thanks in advance!

Answer 1

Here’s one possibility: it looks like you’re establishing the “load” handler on your temporary image element after you’re initializing the “src”. That’s a problem in IE – reverse the order of those things and see if that helps.

    $("#main-img").find('img').fadeOut(400,
    function() {
        $("<img/>").load(function() {
            $("#main-img").find('img').attr("src", this.src).fadeIn(400);
        }).attr("src", src);
    })

If the image is in the cache, then when you assign the “src” attribute IE will immediately ready the element. If there’s no “load” handler defined at that point, it won’t queue up the event at all.

Also, just as a note, the construct

    $('#main-img').find("img")

could be written:

    $('#main-img img')

Doing it like that is a little shorter, but in truth it may or may not actually be faster. Probably would be, I think.