Question

尽管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; }

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

Answer 1

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

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

每当我遇到一些跨浏览器问题时，我首先考虑标记，然后是代码。我建议运行一个验证（http://validator.w3.org/），看看你发现了什么..另外，如果可能的话，附上你的部分html标记，这样我们也可以测试它 - 没有像团队调试那样：）

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

编辑：

好的，我冒昧地解决了问题错误jslint指出（甚至无意义的分号）和forked it to a new jsFiddle。注意如何我把大部分的js放在一个地方。
此外，chrome应该有内置功能 “调试器”就像firefox中的firebug一样，也许你可以看到错误也出现在那里。
最后，我知道这可能是很讨厌，但我真的这么做建议分离样式，js代码标记完全更好可读性，请尝试w3 validator

Answer 4

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

您是否尝试过将loader的定义与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中显示

4 个答案: