Detect resources loading in Angular

Question

I have an issue with a directive that I created in Angular. In this directive, I want to execute some code after the window.onload event to be sure that all the page resources have been loaded (because I want to know the page top offset of some elements in the directive and if the images are not loaded, this offset is not correct)

If I refresh the page, it works because of the window.onload event is fired but when using the angular navigation to reach my component, this event is not fired anymore. I tried to use the lifecycle of angular like AfterViewInit but most of the time the AfterViewInit method is executed before the images are loaded.

UPDATE This is the code of my directive :

export class ParallaxDirective implements OnInit, OnDestroy {
    @Input() coef = 1;

    start = 0;
    path = 0;
    initialTranslate = 0;
    intersectObserver: IntersectionObserver;
    inView: boolean;

    constructor(
      private element: ElementRef
    ) {

    }

    ngOnInit(): void {
      window.addEventListener('load', () => this.initParallax());
    }

    ngOnDestroy(): void {
      this.intersectObserver.unobserve(this.element.nativeElement);
      window.removeEventListener('scroll', () =>this.setTransform());
    }

    initParallax(): void {
      this.intersectObserver = new IntersectionObserver(this.intersect.bind(this));
      this.intersectObserver.observe(this.element.nativeElement);

      const initialY = new DOMMatrixReadOnly(window.getComputedStyle(this.element.nativeElement).getPropertyValue('transform')).m42;
      this.start = this.element.nativeElement.offsetTop + initialY;
      this.path = this.element.nativeElement.clientHeight;
      this.initialTranslate = (initialY /
this.element.nativeElement.clientHeight) * 100;
      if (window.pageYOffset > 0) {
        this.setTransform(true);
      }
      window.addEventListener('scroll', () => this.setTransform());
  }

  setTransform(force = false): void {
    if (!this.inView && !force) {
      return;
    }
    const offset = window.pageYOffset + window.innerHeight - this.start;
    const t = (offset * 10) / this.path;
    const i = t * this.coef + this.initialTranslate;
    this.element.nativeElement.style.setProperty('transform', `translate3d(0, ${i}%, 0)`);
  }

  intersect(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void {
    entries.forEach(entry => {
      this.inView = entry.isIntersecting || entry.intersectionRatio > 0;
    });
  }

}

As you can see, I need to retrieve some offsets and dom elements height. The problem is that these offsets and heights are not the same after resources in the page (like images) are completely loaded that's why I need to have an event like window.onload to be sure that everything is loaded. And I didn't find any Angular lifecycle that should be triggered after resources load.

I hope someone can help me with this.

Thanks.

Answer 1

After a long long exchange of comments, I finally understood your problem, Romain, and here's what I came up with.

My solution involves adding a directive and a service. The directive will be attached to all <img> tags, and will subscribe to their load events, and the service will coordinate all the load events firing and maintain a running list of images that are still being loaded.

Here's the directive:

@Directive({
  selector: 'img'
})
export class MyImgDirective {
  constructor(private el: ElementRef, private imageService: ImageService) {
    imageService.imageLoading(el.nativeElement);
  }

  @HostListener('load')
  onLoad() {
    this.imageService.imageLoadedOrError(this.el.nativeElement);
  }

  @HostListener('error')
  onError() {
    this.imageService.imageLoadedOrError(this.el.nativeElement);
  }
}

Here's the service:

@Injectable({
  providedIn: 'root'
})
export class ImageService {
  private _imagesLoading = new Subject<number>();
  private images: Map<HTMLElement, boolean> = new Map();
  private imagesLoading = 0;

  imagesLoading$ = this._imagesLoading.asObservable();

  imageLoading(img: HTMLElement) {
    if (!this.images.has(img) || this.images.get(img)) {
      this.images.set(img, false);
      this.imagesLoading++;
      console.log('images loading', this.imagesLoading);
      this._imagesLoading.next(this.imagesLoading);
    }
  }

  imageLoadedOrError(img: HTMLElement) {
    if (this.images.has(img) && !this.images.get(img)) {
      this.images.set(img, true);
      this.imagesLoading--;
      console.log('images loading', this.imagesLoading);
      this._imagesLoading.next(this.imagesLoading);
    }
  }
}

And here's how I would use it in your parallax directive:

  constructor(private imageService: ImageService) {}

  ngOnInit() {
    this.sub = imageService.imagesLoading$.pipe(filter(r => r === 0)).subscribe(_ => {
      this.initParallax()
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

How does this work? The image directive gets attached to all images regardless of how deep they are in your component tree, registers the image with the service, and then tracks the loading progress by listening to the load event. Every time a new directive is created it means a new image is created, so a counter is incremented, and every time load fires, it means an image has finished loading, so the counter is decremented. We emit this counter in an observable, and so we can detect when all images are ready by waiting for the observable to emit the value 0.

Stackblitz demo

EDIT Added error handling in case an image points to a broken link

Answer 2

You can use HostListener

import { HostListener, Component } from "@angular/core";

@Component({
  selector: 'app',
  template: `<h1>{{message}}</h1>`
})
class AppComponent {
  message = "Window not loaded";

  @HostListener('load', ['$event'])
  windowLoadedEvent(event) {
    this.message = "Window loaded";
  }
}

Note: It will work only if the component is initialized before window is loaded. Otherwise it will not work