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

页面.组件.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 上隐藏启动屏幕。相反，这样做:

记录您在 Controller 中显示的图像数量。

总图片数 = 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');
  }
}