in angular 5 如何在子组件加载所有图像之前制作启动画面？

Question

我使用 angular 5 来显示包含大量高分辨率图像的页面，加载时间过长。我想做的是制作一个 启动画面 ，一个 div 将覆盖整个屏幕，并且在所有图像加载完成后它会消失。在 angular 5 中如何以及在何处实现此功能？

window.onload = someFunction; // is not working well

page.component.html:

<div id="page" class="page">
<div id="splash"></div>
<div id="home-page">
    <div class="container  d-none d-lg-block">
        <img src="assets/images/home/line_with_bird.png" alt="">
        <div class="row">
            <div class="col-3 ad-paper">
                <img src="assets/images/home/paper.png" class="" alt="">
            </div>
            <div class="col-2">
                <img id="arrow-word" src="assets/images/arrow_word.png" alt="">
                <img id="ladder" src="assets/images/ladderLong.png" alt="">
            </div>
            <div class="col-6 offset-1 c2">
                <div id="window"></div>
                <div class="smicos">
                    <app-socialmedia style="width: 641px;"></app-socialmedia>
                </div>
            </div>
        </div>
    </div>
</div>

page.component.ts

ngOnInit() {
    function splash() {
        console.log('tttttttttttttttttttttttttttttttttttttttttt');
        document.getElementById('splash').style.display = 'none';
        document.getElementById('window').classList.add('window-animation');
    }

    window.onload = splash;
}

Answer 1

不要在 ngOnInit 上隐藏启动画面。而是这样做：

记录您在控制器中显示的图像数量。

totalImages = 20;

在每个图像上保留一个负载处理程序；

<img (load)='checkAllLoaded()'>

在checkAllLoaded函数中，检查是否加载了所有图片：

checkAllLoaded() {
  this.totalImages = this.totalImages - 1;
  if(this.totalImages === 0) {
     document.getElementById('splash').style.display = 'none';
     document.getElementById('window').classList.add('window-animation');
  }
}

Answer 2

在属性上设置一个带有 *ngIf 的 div，只有在加载图像时才会变为真。

<div class="splash" *ngIf="!loaded"></div>
<img [src]="img" (load)='loaded=true'>

DEMO

in angular 5 如何在子组件加载所有图像之前制作启动画面？

in angular 5 how to make splash screen till the child component load all images?

javascript

jquery

user-experience

angular