在加载程序后面添加背景以隐藏加载屏幕

Question

如何在创建页面之前在加载程序后面添加 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标签后面设置背景。请帮忙

Answer 1

<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);

Answer 2

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

试试这个：

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

http://jsfiddle.net/urLsj7eu/

Answer 3

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

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;

}

在加载程序后面添加背景以隐藏加载屏幕

Add a background behind loader to hide loading screen

javascript

jquery

jquery-ui

jquery-mobile