Question

我想在加载index.html文件中的app-root组件时显示滚动img。如果我在其中放置文本，则文本会立即显示，但img需要时间才能显示。

<body>
    <app-root>

        <div class="load">
            Test load
        </div>

CSS

.load{
     background-image: path.
}

Answer 1

请确保您的背景css规则直接位于html文件中，而不是在您的css文件中也必须加载。

<app-root>
    <div style="background-image: url('')"></div>
</app-root>

如果您的图片不是太大，您可以将其转换为this等网站上的base64并直接添加，如下所示：

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhE...);

或

<img width="50" height="50" src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>

Answer 2

我建议使用ngSwitch here

<div [ngSwitch]='status'>
    <div *ngSwitchCase="'loading'">
        <!-- all of the inline styles and massive SVG markup for my spinner -->
    </div>
    <div *ngSwitchCase="'active'">
    </div>
</div>

Answer 3

我的仓库中加载屏幕的部分

 constructor(private router: Router,private _loadingSvc: LoadingAnimateService) {

        router.events.subscribe((event: RouterEvent) => {
          this.navigationInterceptor(event);
        });
      }


      // Shows and hides the loading spinner during RouterEvent changes
      navigationInterceptor(event: RouterEvent): void {
        if (event instanceof NavigationStart) {
          this.loading = true;
          this._loadingSvc.setValue(true);// temporary solution to loading
        }
        if (event instanceof NavigationEnd) {
          this.loading = false;
          this._loadingSvc.setValue(false);//temporary solution to loading
        }

        // Set loading state to false in both of the below events to hide the spinner in case a request fails
        if (event instanceof NavigationCancel) {
          this.loading = false;
        }
        if (event instanceof NavigationError) {
          this.loading = false;
        }
      }

Html模板

<div *ngIf="loading">
            <!-- show something fancy here, here with Angular 2 Material's loading bar or circle -->
            <div class = "parent">
              <div class="spinner">
                <div class="rect1"></div>
                <div class="rect2"></div>
                <div class="rect3"></div>
                <div class="rect4"></div>
                <div class="rect5"></div>
              </div>
            </div>

          </div>

显示加载组件时的加载屏幕

3 个答案: