Angular:在Angular中懒惰地加载背景图像

Question

I Angular有一个包含1000多个背景图像的网格。我想把它们懒洋洋地载入卷轴。这是我的代码：

<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

活跃的班级被完美地解雇了。但是所有的背景图像仍然被加载在背景中。即使它们没有显示。

有什么想法吗？

Answer 1

这里有一个npm包可以解决同样的问题。