我的 Angular 有一個包含 1000 多個背景影像的網格。我想在滾動時延遲加載它們。這是我的代碼:
<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
活動班級被完美解雇。但是所有的背景影像仍然在后臺加載。即使它們不顯示。
有任何想法嗎?
uj5u.com熱心網友回復:
這是一個解決相同問題的npm 包。
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/387502.html
標籤:有角的
