Angular: Lazy loading backgroundimage in Angular

Question

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?

I just tried it with simple list and it worked for me. Can you please reproduce it in stackblitz? — yurzui
– yurzui, Commented Dec 20, 2021 at 5:46
I used the package of @Dev Gourav and now it works like a charm. — A. Nurb
– A. Nurb, Commented Dec 20, 2021 at 5:55

Dev Gourav · Accepted Answer · 2021-12-20 05:33:08Z

2

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

answered Dec 20, 2021 at 5:33

Dev Gourav

1369 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: Lazy loading backgroundimage in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related