在Angular中,可以使用ngx-lazyload-image库来实现图片的懒加载。下面是一个代码示例:
npm install ngx-lazyload-image
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LazyLoadImageModule } from 'ngx-lazyload-image';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, LazyLoadImageModule],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
imageUrl = 'image.jpg';
}
这样就可以实现图片的懒加载了。当页面滚动到图片位置时,图片才会加载并显示出来,可以节省页面加载时间和带宽。