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

时间:2015-06-16 11:09:57

标签: javascript jquery jquery-ui jquery-mobile

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

3 个答案:

答案 0 :(得分:1)

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

试试这个:

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

http://jsfiddle.net/urLsj7eu/

答案 1 :(得分:1)

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

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;

}

答案 2 :(得分:0)

".slider"

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

在你的情况下,这将是:

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