Angular 2/4+ 的渐进图像延迟加载库

Angular 2/4+ 的渐进图像延迟加载库
插件名称 angular-image-loader
发布时间 2020年7月16日
插件作者 thisissoon

一个简单的渐进式/响应式/延迟加载Angular 2/4 +图像库,没有其他依赖项,可检测浏览器大小并在查看元素时加载适当的图像。

安装:

# NPM
$ npm install @thisissoon/angular-image-loader --save

用法:

将其包含在您的应用模块中。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Provider } from '@angular/core';
import { InViewportModule, WindowRef } from '@thisissoon/angular-inviewport';

import { ImageLoaderModule } from './image-loader';
import { AppComponent } from './app.component';

export const getWindow = () => window;
export const providers: Provider[] = [
  { provide: WindowRef, useFactory: (getWindow) }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    InViewportModule.forRoot(providers),
    ImageLoaderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在您的应用程序组件中使用。

<sn-image-loader
  [image]="image"
  [sizes]="sizes"
  imgClass="foo"
></sn-image-loader>