Question

另一个Internet Explorer问题！乐趣永无止境吧... 这个与AJAX和IE有关。我正在使用JQuery来帮助构建一个函数，它使用PHP页面提取新的HTML内容，预加载它，然后用旧内容切换内容。以下是我的代码：

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） - 重新授予onclick权限

主动演示：http://evenicoulddoit.com/dev/jan_2008/themes/eicdi1/design1.php 在IE以外的所有浏览器中都能很好地工作，它偶尔会工作，然后就会中断。

有什么想法吗？非常感谢。（没有缓存已被强制，唯一网址，唯一响应）伊恩克拉克

Answer 1

您的问题在于您的图片网址每次都不是唯一的。因此，即，当您请求相同的图像时，它会被缓存，并且不会运行图像加载事件。

每次请求时，都可以通过在查询字符串中添加时间戳来确保唯一的URL。

例如“http://evenicoulddoit.com/dev/jan_2008/themes/eicdi1/curves.jpg?t=12322323”

您将错过缓存的好处，但它会让您再次运行。

展望未来我会考虑采用不同的设计，但这有点深入，可能超出了这个问题的界限。

Answer 2

摆脱主页按钮上的html代码中的onclick。你可以使用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();
                });
            }); 
        }
    });
}

JQuery AJAX IE不一致

2 个答案: