为AngularJS网站制作全屏加载图像

时间:2018-04-26 04:11:00

标签: angularjs ngcloak

我希望在我的AngularJS网站完全自助之前显示全屏图像。

一种方法是使用ng-cloak

这是an example以显示一行单词。

我尝试制作全屏图片

[ng-cloak].splash {
    /* The image used */
    background-image: url("https://media.thetab.com/blogs.dir/13/files/2017/02/nice-guy-2.jpg");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

http://plnkr.co/edit/OTYwqGehVAsw5R8V?preview

但它没有用。有谁知道为什么?

1 个答案:

答案 0 :(得分:0)

您错过了[ng-cloak].splash

中的[ng-cloak].splash { /* The image used */ background-image: url("https://media.thetab.com/blogs.dir/13/files/2017/02/nice-guy-2.jpg"); /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; display: block !important; }
[{
    "bandera": "http://someimage.her.png",
    "copas": 0,
    "jugadores": {
        "jugardor0001": {
            "Nombre": "alice",
            "score": 100
        },
        "jugardor0002": {
            "Nombre": "bob",
            "scoe": 80
        }
    }
}, ...]

http://plnkr.co/edit/oiGcMrO18nMt8KmM1d6X?preview&p=preview