Ajax Loader未在Google Chrome中显示

虽然在Stackoverflow中已经多次讨论过这个问题，但我无法在Google Chrome中显示加载程序gif。 在Firefox 3.6中，我下面的代码在我进行ajax调用时可以正常显示小gif，但是如果使用Google Chrome，相同的代码将无法显示任何内容。 由于我们的客户使用Chrome，因此我必须确保它兼容。

这是onLoad事件中的jQuery代码：

var loader = $('
') .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(); }); 

有谁知道为什么它没有显示为铬？

编辑：在下面添加我的一些标记;

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应用程序，因此您不会加载任何数据。

Answer 1

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

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

编辑：

1. 好吧，我冒昧地修复了jslint指出的错误（甚至是毫无意义的分号）并将其分解为一个新的jsFiddle 。 注意我是如何将大多数js堆叠在一个地方的。
2. 此外，chrome应该有一个内置的“调试器”，就像firefox中的firebug一样，也许你可以看到那里出现的错误。
3. 最后，我知道这听起来很烦人，但我确实建议分开样式，js代码标记完全为了更好的可读性，请尝试w3validation器

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 = $('
') .appendTo("body") .hide().ajaxStart(function() { var relativeToDocument = false; var parent = loader.parent(); ... 

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

 var loader = $('
') .appendTo("body").hide(); loader.ajaxStart(function() { var relativeToDocument = false; var parent = loader.parent(); ...