角4すべての画像がロードされるのを待つ方法

Question

私はNGルーティング用にui-routingを使用しています（各セクションは異なるです）。 一部のセクションでは、ngZoneで（waypoint.js - imakewebthings.com/waypoints/）を使用しています。実際のページの高さを得るには、すべての画像と動画（ページ内のすべてのビューで）を読み込む必要があります。それが可能かどうか、どうすればこのことができますか？

addEventListener('load', ...)のようなものは、いくつかのページ（それぞれに複数のセクション（ui-view）を持っている）があり、最初の開いているページのためだけに機能するため動作しません。

マイコード：

<section class="moving-car" id="moving-car" [ngClass]="{'is-active': isActive}"> 

<!-- content --> 

</section> 

TS：

import { Component, OnInit, AfterViewInit, OnDestroy, NgZone, 
ChangeDetectorRef } from '@angular/core'; 

declare var Waypoint: any; 
import 'waypoints/lib/noframework.waypoints.js'; 

@Component({ 
    selector: 'app-avensis-moving-car', 
    templateUrl: './avensis-moving-car.component.html', 
    styleUrls: ['./avensis-moving-car.component.scss'] 
}) 
export class AvensisMovingCarComponent implements OnInit, OnDestroy, AterViewInit { 

    constructor(
    private $zone: NgZone, 
    private ref: ChangeDetectorRef 
) {} 

    private waypoint: any; 
    public isActive: boolean = false; 

    ngOnInit() {} 


    ngAfterViewInit(): void { 
    const activate =() => { 
     this.isActive = true; 
     this.ref.detectChanges(); 
    }; 

    this.$zone.runOutsideAngular(
    () => { 

     /* this code below I want run after loaded all image in my 
     subpage (not only in this component) */ 

     this.waypoint = new Waypoint({ 
      element: document.getElementById('moving-car'), 
      handler: function (direction) { 
      activate(); 
      this.destroy(); 
      }, 
      offset: '70%' 
     }); 
     } 
    ); 
    } 

    ngOnDestroy() { 
    this.waypoint.destroy(); 
    } 
} 

Answer 1

（エブリーページに対する同様）

Myページコンテナ例動画自動車部品用

<ui-view name="header"></ui-view> 
<ui-view name="moving-car"></ui-view> 
<ui-view name="aaa"></ui-view> 
<ui-view name="bbb"></ui-view> 

私は自分のngAfterViewを変更するInit機能を使用しているように見えますが、これが問題を解決する良い方法であるかどうかわかりません。

ngAfterViewInit(): void { 
    const activate =() => { 
    this.isActive = true; 
    this.ref.detectChanges(); 
    }; 

    const images = document.querySelectorAll('img'); 
    let counter = 0; 

    for (let i = 0; i < images.length; i++) { 
    images[i].addEventListener('load',() => { 
     console.log('image loaded'); 

     if (++counter === images.length) { 
     this.$zone.runOutsideAngular(
     () => { 
      this.waypoint = new Waypoint({ 
       element: document.getElementById('moving-car'), 
       handler: function (direction) { 
       activate(); 
       this.destroy(); 
       }, 
       offset: '70%' 
      }); 
      } 
     ); 
     } 
    }, false); 
    } 
}