Angular: Lazy loading backgroundimage in Angular

Issue

I Angular have a grid with 1000+ backgroundimages. I want to lazy load them on scroll. This is my code:

<div inViewport [inViewportOptions]="{ threshold: [0] }" (inViewportAction)="onIntersection($event)" class="artist_image" [ngStyle]="{ 'background-image': 'url(\''+ artist.image + '\')'}"></div>

 public onIntersection({
    target,
    visible,
  }: {
    target: Element;
    visible: boolean;
  }): void {
    this.renderer.addClass(target, visible ? "active" : "inactive");
    this.renderer.removeClass(target, visible ? "inactive" : "active");
  }

.artist_image
    height: 0
    padding-bottom: 100%
    background-size: cover
    background-position: center
    background-repeat: no-repeat
    &.inactive
        background-image: none !important

the active class gets fired perfectly. But all the background images are still being loaded in the background. Even if they are not displayed.

Any ideas?

Solution

Here's a npm package that solves the same issue.

Answered By - Dev Gourav