JQuery AJAX IE Несоответствия

Question

Еще одна проблема Internet Explorer! Веселье никогда не кончается, не так ли ... Этот связан с AJAX и IE. Я использую JQuery, чтобы помочь создать функцию, которая извлекает новый контент HTML, используя страницу PHP, предварительно загружает его, а затем переключает контент со старым контентом. Вот мой код ниже:

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' />\n" +
                            "<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);
            };
        }
    }); 
}

Шаг за шагом это делает это: - Удалить событие onclick триггера до завершения обработки. - хлопает загрузочную планку сверху (showcaseLoad) - Выполняет функцию AJAX (используя преимущество POST для IE и случайное число, поэтому оно уникально) - Получает результаты и разделяет, используя | разделитель. - Создает контент HTML - предварительно загружает новое изображение - Меняет местами два DIV (slideToggle) - Повторное предоставление разрешения на клик

Активная демоверсия: http://evenicoulddoit.com/dev/jan_2008/themes/eicdi1/design1.php Отлично работает во всех браузерах, кроме IE, где он иногда будет работать, а потом просто сломается.

Есть идеи? Очень ценится. (Без кеша уже принудительно, уникальный URL, уникальный ответ) Ян Кларк

Answer 1

Избавьтесь от клика, который есть в вашем html-коде на кнопке home. Вы можете использовать jquery, чтобы выбрать эту кнопку и добавить прослушиватель события click, не нужно делать ваш HTML грязным.

Также вы можете использовать событие загрузки jquery на вещах, отличных от документа, в вашем случае это будет удобно в изображениях, событие загрузки также устраняет проблему того, что оно уже «загружено» и IE не запускает ваш старый ». onload "событие. (протестировано в IE8 и IE7)

Вам не нужно будет добавлять дополнительную случайную строку на изображение.

Тогда попробуйте это:

$('#home').click(function(){
    if( !$('#showcaseLoad:visible').length ) showcase();
});

function showcase() {
    var x = Math.floor(Math.random()*100000);
    $('#showcaseLoad').show();
    $.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' />\n" +
                            "<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)
            .find('img').load(function(){
                $("#showcase_0").slideToggle(1400);
                $("#showcase_1").slideToggle(1400,function(){
                    $('#showcaseLoad').hide();
                });
            }); 
        }
    });
}

Answer 2

Ваша проблема связана с тем фактом, что ваши URL изображения не являются уникальными каждый раз. Следовательно, то есть, когда вы запрашиваете одно и то же изображение, оно кэшируется и не запускает событие загрузки изображения.

Вы можете обеспечить уникальный URL-адрес, добавляя отметку времени к строке запроса каждый раз, когда вы ее запрашиваете.

например "http://evenicoulddoit.com/dev/jan_2008/themes/eicdi1/curves.jpg?t=12322323"

Вы упустите преимущества кэширования, но это заставит вас снова работать.

В дальнейшем я бы рассмотрел другой дизайн для этого, однако, это немного глубже и, вероятно, выходит за рамки этого вопроса.