1

我的页面上有一个带有以下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。

我需要做些什么来预加载该背景以便它一直显示，或者我可以做些什么来防止这个问题？

4

2 回答 2

2

也许是因为display:noneCSS 属性。文件准备好后，为什么不让它不可见？加载将在加载文档期间出现。只需删除中的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');
      }
    });
});
于 2012-08-22T15:46:07.673 回答
1

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

于 2012-08-22T16:17:24.657 回答