Angular: Lazy loading backgroundimage in Angular-CodePudding

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)"  [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?

CodePudding user response：

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