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

Question

I'm using angular 5 for displaying pages that have a lot of images with high res, and it takes too long to load. What I want to do is to make a splash screen, a div that will cover the full screen, and after all the images finish loading it will disappear. How and where do I implement this in 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

Do not hide your splash screen on ngOnInit. Instead do this:

Keep count of images you are showing in controller.

totalImages = 20;

Keep a load handler on each image;

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

In checkAllLoaded function, check if all images are loaded:

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