Ajax Loader不在Google Chrome中显示

Question

尽管在Stackoverflow中已对此进行了多次讨论，但我无法使加载程序gif显示在Google Chrome中。在Firefox 3.6中，我下面的代码可以很好地在我每次进行Ajax调用时显示小gif，但如果使用Google Chrome，则相同的代码将不会显示任何内容。由于我们的客户使用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; }

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

Answer 1

[每当遇到跨浏览器问题时，我都会首先考虑标记，然后考虑代码。我建议进行验证（http://validator.w3.org/）并查看发现的内容。此外，如果可能，请附加html标记的一部分，以便我们也可以对其进行测试-类似于团队调试：）

等等，我刚刚注意到div是空的，这意味着您必须使用CSS来定位gif（背景图片？），还请附加相关的样式

编辑：

1. 好的，我可以自由地修复jslint指出的错误（甚至无意义的分号）和forked it to a new jsFiddle。注意如何我将大部分js放在一个地方。
2. 此外，Chrome应该内置“调试器”，例如firefox中的firebug，也许你看到的错误也出现在这里。
3. 最后，我知道这可能是讨厌听到，但是我确实建议单独的样式，js代码完全标记更好可读性，请尝试w3 validator

Answer 2

我不知道这是否可以解决您的问题，但是即使对于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速度更快或加载脚本资源更快，或者类似的东西。

Answer 3

从我在代码的第一部分中看到的，您正在创建一个变量，并在该变量中声明的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();
    ...

Answer 4

我知道这是一篇老文章，但以防万一有人遇到相同的挑战，我在MVC 5应用程序上要做的全部工作就是在Visual Studio中安装Nuget软件包：'NWebsec.Mvc'和该应用程序运行得很好。