jQuery AJAX IE不一致

Question

Another Internet Explorer issue! The fun never ends does it... This one is related to AJAX and IE. I'm using JQuery to help build a function, that pulls in new HTML content using a PHP page, pre-loads it, and then switches the content over with the old content. Here is my code below:

function showcase() {

    document.getElementById("home").onclick = "";
    var x = Math.floor(Math.random()*100000);
    $('#showcaseLoad').css('display', 'block');
    $.ajax({
        type: "POST",
        url: "test.php",
        data: "not=" + showcase_current_id + "&x=" + x,
        error: function() { alert("Failure"); },
        success: function(s_results) { 
            if(showcase_current == 0) showcase_current = 1;
            else showcase_current = 0;

            s_parts = s_results.split("|");
            showcase_current_id = s_parts[0];
            var s_content = "<img id='showcase_image_" + s_parts[0] + "' src='"+s_parts[3]+"' alt='Showcase Preview Image' />
" +
                            "<h2 style='color:#"+s_parts[4]+";'>"+ s_parts[1]+" &mdash; <em>"+s_parts[2]+"</em></h2>" +
                            "<p>"+s_parts[5]+" <a href='"+s_parts[0]+"' style='color:#"+s_parts[4]+";'>[ Read On ]</a></p>" +
                            "<div style='display:none;'>" + s_parts[6] + "</div>";

            $("#showcase_" + showcase_current).html(s_content);                     
            showcase_image = new Image();
            showcase_image.src = s_parts[3];
            showcase_image.onload = function() {                                    
                $("#showcase_0").slideToggle(1400);         
                $("#showcase_1").slideToggle(1400);                 
                setTimeout("document.getElementById('home').onclick = function() { showcase(); }; $('#showcaseLoad').css('display', 'none');", 1500);
            };
        }
    }); 
}

Step by step it does this: - Remove the onclick event of the trigger until finished processing. - Slaps a loading bar over the top (showcaseLoad) - Performs the AJAX function (using POST for IEs benefit, and a random number so it's unique) - Retrieves the results, and splits using the | delimiter. - Creates HTML content - Preloads the new image - Swaps the two DIVs over (slideToggle) - Re-grants onclick permission

Active Demo: http://evenicoulddoit.com/dev/jan_2008/themes/eicdi1/design1.php Works perfectly in all browsers other than IE, where it will occasionally work, and will then just break.

Any ideas? Much much appreciated. (No-cache already forced, unique url, unique response) Ian Clark

Answer 1

Your issue lies with the fact your image url's are not unique every time. Therefore, in ie, when you request the same image it is cached and it does not run the image load event.

You can ensure a unique url by adding a timestamp to the querystring every time you request it.

e.g "http://evenicoulddoit.com/dev/jan_2008/themes/eicdi1/curves.jpg?t=12322323"

You will miss the benefits of caching however it will get you running again.

Going forward I would consider a different design for this however but this is a bit more in depth and probably outside the boundaries of this question.