在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中实现图片懒加载的解决方法。