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

Question

我想在我的 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

但是没有用。有谁知道为什么？

Answer 1

您在 [ng-cloak].splash

中错过了 display: block !important;

[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;
}

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

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

Make a full-screen loading image for an AngularJS website

angularjs

ngcloak