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调用时，我在主体上添加或删除“loading”类：

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属性。文档准备好后，为什么不让它不可见？加载将在加载文档期间出现。只需删除display

中的.modal属性即可

和javascript：

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

Answer 2

如果在引用的样式表中没有任何与样式规则匹配的HTML元素，我的经验是不会加载与样式规则相关的任何资源。避免这种情况的一种方法是使用data URIs，因为这意味着资源在样式表中已经可用。当然，如果你必须支持某些旧的浏览器（IE7），那么这对你不起作用。

“正在加载”图像未显示

2 个答案: