Question

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.

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();
    });

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

EDIT: Adding some of my markup below;

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

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.

Answer 1

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 🙂

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

edit:

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