angular 图片引入_在Angular中使用ng-lazyload-image图片懒加载插件

安装

npm install ng-lazyload-image --save

引入

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { LazyLoadImageModule } from 'ng-lazyload-image';

import { AppComponent } from './app.component';

@NgModule({

declarations: [ AppComponent ],

imports: [ BrowserModule, LazyLoadImageModule ],

bootstrap: [ AppComponent ]

})

export class MyAppModule {}

使用

import { Component } from '@angular/core';

@Component({

selector: 'image',

template: `

`

})

class ImageComponent {

defaultImage = 'https://www.placecage.com/1000/1000';

image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';

offset = 100;

}

defaultImage(可选)

类型： string

例： https://www.placecage.com/1000/1000

默认图像的路径。该图像将立即加载。

您还可以使用srcimg标签的属性来定义默认图像：

或background-image用于非图像标签属性：

errorImage(可选)

类型： string

例： https://i.imgur.com/XkU4Ajf.png

无法加载的图像lazyLoad。defaultImage如果不存在，将加载默认图像()。

scrollTarget(可选)

类型： Element

例： document.getElementById('my-scroll-container')

默认： window

如果使用滚动容器，并且不将滚动事件传播到窗口，则需要设置此属性。

scrollObservable(可选)

类型： Observable

例： Observable.fromEvent(myScrollContainer, 'scroll')

如果您需要对流程进行更多控制，则可以传递自己的观察值。如果与诸如ionic之类的其他框架集成，可能会很有用。

useSrcset(可选)

类型： boolean

例： true

true如果您需要使用srcset属性而不是来延迟加载图片，可以将其设置为src。

标记srcset默认设置为使用，因此您无需额外设置此选项。

onLoad(可选)

类型： Function: (success: boolean) => void

例：

您可以传递一个回调函数，在加载图像时将调用该函数。