jquery - "Loading"图片不显示

Question

我的页面上有一个带有以下 css 的 div:

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

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

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

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

我需要做些什么来预加载该背景，以便它始终显示，或者我可以采取什么措施来防止此问题？

Answer 1

可能是因为 display:none CSS 属性。当文档准备好后，为什么不将其设置为不可见呢？在加载文档的过程中会出现加载情况。只需删除 .modal 中的 display 属性

还有 JavaScript:

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