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

本文介绍了如何在Angular应用中使用ng-lazyload-image插件实现图片懒加载。首先通过npm安装插件,然后在模块中导入并配置。在组件中,设置默认图片、错误图片、滚动目标等选项,实现图片在视口附近时才开始加载,提高页面性能。
摘要由CSDN通过智能技术生成

安装

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

例:

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值