未显示“正在加载”图片

I have a div on my page with the following css:

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .35 ) 
                url('/NoAuth/cf/ajax-loader.gif')
                50% 50% 
                no-repeat;
}


/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

And I add or remove the "loading" class on the body when a .ajax call is made using:

jQuery(document).ready(function () {
    jQuery('body').on({
      ajaxStart: function() {
        jQuery(this).addClass('loading');
      },
      ajaxStop: function() {
        jQuery(this).removeClass('loading');
      }
    });
});

But much of the time, I find during the ajax call, the background changes color, but the gif doesn't show up. If, however, I go to the Firebug console and type jQuery('body').addClass('loading'), the image does show up. And when I look at the "Net" tab in Firebug, it shows that it didn't load the gif until I typed that .addClass command.

Is there something I need to do to pre-load that background so it shows up all the time, or what can I do to prevent this problem?

Maybe it's because of the display:none CSS attribute. Why don't you make it invisible when the document is ready ? The loading would appear during the loading of the document. Just remove the display attribute in .modal

And the javascript :

jQuery(document).ready(function () {
    jQuery('body .modal').hide();
    jQuery('body').on({
      ajaxStart: function() {
        jQuery(this).addClass('loading');
      },
      ajaxStop: function() {
        jQuery(this).removeClass('loading');
      }
    });
});

If you don't have any HTML elements matching a style rule in a referenced stylesheet, my experience is any resources related to the style rule won't be loaded. One way to avoid that is to use data URIs as that means the resource is already available in the stylesheet. Of course, if you have to support certain older browsers (IE7) then this wouldn't work for you.