Ajax加载程序未在Google Chrome中显示

尽管Stackoverflow已经多次讨论过这个问题，但我无法在Google Chrome中显示加载程序gif。在Firefox 3.6中，我在下面编写的代码可以很好地显示小gif，只要我进行ajax调用，但是如果使用谷歌浏览器，相同的代码将不会显示任何内容。由于我们的客户使用Chrome，因此我必须确保它兼容。这是onLoad事件中的jQuery代码：

var loader = $('<div id="ajax-loader" class="ui-corner-all"><span></span></div>')
                .appendTo("body")
                .hide().ajaxStart(function() {
        var relativeToDocument = false;
        var parent = loader.parent();
        loader
                    .css("top", (relativeToDocument ? $(window).scrollTop() : 0)
                                + (parent.innerHeight() / 2)
                                - (loader.height() / 2))
                    .css("left", (relativeToDocument ? $(window).scrollLeft() + parent.offset().left : 0)
                                 + (parent.innerWidth() / 2)
                                 - (loader.width() / 2))
                    .show();
                })
    .ajaxStop(function() {
                loader.hide();
    });

有谁知道为什么它没有显示为chrome？编辑：在下面添加我的一些标记; gif的CSS在这里：

#ajax-loader { position: absolute; padding: 10px; }
#ajax-loader span { background-image: url("../images/ajax-loader.gif"); width: 32px; height: 32px; display: block; }

页面在这里。当然它看起来很糟糕，因为我没有添加css文件和其他东西。另外，这是一个MVC应用程序，因此您不会加载任何数据。

已邀请:

3 个回复

僻朵庙惩竣

每当我遇到一些跨浏览器问题时，我首先考虑标记，然后是代码。我建议运行一个验证（http://validator.w3.org/），看看你发现了什么..另外，如果可能的话，附上你的部分html标记，这样我们也可以测试它 - 没有像团队调试那样:) 等等，我刚注意到div是空的，这意味着你必须使用css定位gif（背景图片？），请附上相关的样式编辑：好的，我冒昧地解决了问题错误jslint指出（甚至无意义的分号）和分叉它是一个新的jsFiddle。注意如何我把大部分的js放在一个地方。此外，chrome应该有内置功能 “调试器”就像firefox中的firebug一样，也许你可以看到错误也出现在那里。最后，我知道这可能是很讨厌，但我真的这么做建议分离样式，js代码标记完全更好可读性，请尝试w3验证器

驮帽俺篮号

我不知道这是否能解决您的问题，但即使对于jQuery开发人员来说，滥用空白也是非常糟糕的。我不知道为什么jQuery开发人员觉得需要将他们在一行上的每个调用链接起来。

var top, left;
top = relativeToDocument ? $(window).scrollTop() : 0;
top += parent.innerHeight()/2 - loader.height()/2;
loader.css("top", top);
left = relativeToDocument ? $(window).scrollLeft() + parent.offset().left : 0;
left += parent.innerWidth()/2 - loader.width()/2;
loader.css("left", left);
loader.show();

圣牛看那个！它现在看起来像一个真正的编程语言！现在，您实际上可以尝试使用调试器来记录或逐步解决您的问题，而不想让您的脑筋流失。此外，Chrome也可能只是更快，因此加载图标确实出现，它只是发生得太快而无法注意到。我对此表示怀疑，但有时当Chrome和Firefox有所不同时，这是因为Chrome更快或者加载了更快的脚本资源或类似的东西。

纫合峭

从我在代码的第一部分中看到的，您创建了一个变量，并且您在变量中声明的ajaxStart函数体中使用它。看起来这可能会导致执行上下文和范围链出现问题。

var loader = $('<div id="ajax-loader" class="ui-corner-all"><span></span></div>')
            .appendTo("body")
            .hide().ajaxStart(function() {
    var relativeToDocument = false;
    var parent = loader.parent();
    ...

您是否尝试将加载器的定义与ajaxStart函数分开？例如：

var loader = $('<div id="ajax-loader" class="ui-corner-all"><span></span></div>')
            .appendTo("body").hide();
loader.ajaxStart(function() {
    var relativeToDocument = false;
    var parent = loader.parent();
    ...

要回复问题请先登录或注册

Ajax加载程序未在Google Chrome中显示

3 个回复

发起人

问题状态

Ajax加载程序未在Google Chrome中显示

与内容相关的链接

3 个回复

发起人

问题状态