“载入”图像没有显示

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

我有一个div在我的页面与以下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:

当使用。ajax调用时，我在主体上添加或删除“load”类:

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.

但我发现，在ajax调用的大部分时间里，背景会改变颜色，但gif不会出现。但是，如果我打开Firebug控制台，输入jQuery('body'). addclass ('loading')，图像就会显示出来。当我查看Firebug中的“Net”选项卡时，它显示在我输入. addclass命令之前，它并没有加载gif。

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?

我是否需要做些什么来预先加载背景，使它一直显示，或者我能做些什么来防止这个问题?

2 个解决方案

#1

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

可能是因为显示:无CSS属性。当文档准备好时，为什么不让它隐形呢?在加载文档时将出现加载。只需删除.modal中的display属性

And the javascript :

javascript:

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

#2

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.

如果在引用的样式表中没有匹配样式规则的HTML元素，我的经验是与样式规则相关的任何资源都不会被加载。避免这种情况的一种方法是使用数据uri，因为这意味着在样式表中已经有了资源。当然，如果您必须支持某些较老的浏览器(IE7)，那么这将对您不起作用。