Ajax加载程序未在Google Chrome中显示 [英] Ajax Loader Not Showing in Google Chrome

问题描述

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

Although this has been discussed many times here in Stackoverflow, I couldn't get the loader gif to display in Google Chrome. In Firefox 3.6, the code I have below works just fine for displaying the little gif whenever I make an ajax call but the same code won't display anything if working with Google Chrome. Since our customer uses Chrome I have to make sure it is compatible.

以下是onLoad事件中的jQuery代码：

Here is the jQuery code which is inside the onLoad event:

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？

Does anyone know why it isn't displayed for chrome?

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

Adding some of my markup below;

gif的css在这里：

The css for the gif is here:

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

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

The page is here. Of course it looks bad because I haven't added the css files and other things. Plus, this is a MVC application so you won't have any data to load.

推荐答案

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

Whenever I have some cross-browser issues I think about markup first, then code. I'd suggest to run a validation (http://validator.w3.org/) and see what you find.. Also, if possible, attach part of your html markup so we can test it as well - nothing like team debugging :)

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

wait, I just noticed the div is empty, that means you must have used css to position the gif (background image?), please attach the relevant styling as well

编辑：

1. 好的，我冒昧地修理了
   错误jslint指出（即使是
   无意义的分号）和分叉
   到新的的jsfiddle 。注意
   i如何将大部分j堆叠在一个地方。


2. 此外，chrome应该有一个内置的
   调试器，如firefox中的firebug，
   也许你可以看到
   出现的错误。


3. 最后，我知道这听起来很可能是
   ，但是我真的这么做$ b建议分离样式，js代码
   标记完全可以获得更好的
   可读性，请尝试 w3 validator

1. OK, I took the liberty to fix the errors jslint pointed out (even meaningless semicolons) and forked it to a new jsFiddle. Notice how i stacked most of the js in 1 place.
2. Also, chrome should have a built-in "debugger" like firebug in firefox, maybe you can see the errors that comes up there as well.
3. Lastly, I know this is probably annoying to hear, but I really do suggest seperating styling, js code markup completely for better readability, and please try w3 validator

这篇关于Ajax加载程序未在Google Chrome中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！