在Angular 7中实现图片懒加载的方法如下:
ngx-lazy-load-images
库。可以使用以下命令进行安装:npm install ngx-lazy-load-images --save
app.module.ts
文件中导入LazyLoadImageModule
:import { LazyLoadImageModule } from 'ngx-lazy-load-images';
@NgModule({
imports: [
LazyLoadImageModule
],
...
})
export class AppModule { }
lazyLoad
指令:
在上面的代码中,defaultImage
属性指定了一个默认的占位图片,errorImage
属性指定了在加载出错时显示的图片,lazyLoad
属性指定了要懒加载的图片路径。
LazyLoadImageDirective
指令:
在上面的代码中,当滚动事件触发时,LazyLoadImageDirective.onContainerScroll()
方法将被调用,从而加载图片。
以上就是在Angular 7中实现图片懒加载的解决方法。