“加载”图像不显示

我有下面的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; 
}

我添加或删除的“加载”类在身体上时，阿贾克斯呼叫使用：

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

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

有什么我需要做的预加载背景，所以它显示了所有的时间，或者我能做些什么来防止这个问题？

来源

2012-08-22 Paul Tomblin

将动画gif粘贴在HTML中，而不是将其用作背景并查看是否有效！ – adeneo

也许是因为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'); 
     } 
    }); 
});

来源

2012-08-22 15:46:07

当然，他可以有一个div，只有当他处于“加载”状态时才会出现。 – JayC

我采取了这个想法的大部分，但我改变了它。我加入了一些javascript来设置正文上的“loading”类（正文来自别人的框架，这就是为什么我不直接添加它），然后在文档就绪脚本中，我先删除类。随传随到。这似乎是，正如@JayC上面所说的，足以让浏览器在我需要之前加载该映像。 –

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

来源

2012-08-22 16:17:24 JayC

我不确定你的意思是“没有特定课程的源中的任何项目”？你的意思是说我没有什么“模态”课程？这并不能解释为什么它在我手动设置“加载”类时起作用。 –

对不起，这是非常糟糕的措辞。编辑。 – JayC

谢谢，我想我现在明白了。 –

“加载”图像不显示

回答

相关问题