在加载器后面添加背景以隐藏加载屏幕答案

【问题标题】：Add a background behind loader to hide loading screen在加载器后面添加背景以隐藏加载屏幕
【发布时间】：2015-06-16 11:09:56
【问题描述】：

如何在页面创建之前在加载器后面添加一个bgcolor，只是为了在页面加载之前隐藏白屏。

这是我的代码。

setTimeout(function(){

     $.mobile.loading('show', {
    text: 'Chargement en cours...',
    textVisible: true,
    theme: 'a',
    html: "<span class='ui-bar ui-overlay-c ui-corner-all' ><img width='50px' height='50px' src='http://www.shougun.it/images/loading.gif' /><br><h2>Chargement en cours...</h2></span>"
});
    },5);

我们可以在 span 标签后面设置背景吗？请帮忙

【问题讨论】：

标签： javascript jquery jquery-ui jquery-mobile

【解决方案1】：

是的，您可以在ui-overlay-c 后面设置背景，并使用div 作为包装器。

试试这个：

.ui-overlay-c {
    background: red;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

http://jsfiddle.net/urLsj7eu/

【讨论】：

【解决方案2】：

我不确定你到底想做什么。这可能会有所帮助

http://jsfiddle.net/qtfc83m2/1/

setTimeout(function(){
$(".ui-bar").css("display","block");

    },2000);

上面的代码将在 2 秒后显示加载，如果你想反转然后将 css 和 jquery 更改为

setTimeout(function(){
$(".ui-bar").css("display","block");

    },5);

$(document).load(function() {
$(".ui-bar").css("display","none");
});

CSS

.ui-bar{
    display:block;
position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:rgba(255,0,0,.5);
    text-align:center;

}

【讨论】：

【解决方案3】：

<div style="position: fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.3);text-align: center"><span class='ui-bar ui-overlay-c ui-corner-all' style="text-align:center;display:inline-block"><img width='50px' height='50px' src='http://www.shougun.it/images/loading.gif' style="display:inline"/><br><h2>Chargement en cours...</h2></span></div>

此处示例：http://jsfiddle.net/BramVanroy/qtfc83m2/

在你的情况下，这将是：

setTimeout(function () {
    $.mobile.loading('show', {
        text: 'Chargement en cours...',
        textVisible: true,
        theme: 'a',
        html: '<div style="position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.3);text-align: center"><span class="ui-bar ui-overlay-c ui-corner-all" style="text-align:center;display:inline-block"><img width="50px" height="50px" src="http://www.shougun.it/images/loading.gif" style="display:inline"/><br><h2>Chargement en cours...</h2></span></div>'
    });
}, 5);

【讨论】：