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

最新推荐文章于 2025-09-24 13:34:12 发布

转载最新推荐文章于 2025-09-24 13:34:12 发布 · 2.6k 阅读

文章标签：

#Angular #ng-lazyload-image #图片懒加载

Angular 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个用于Angular的懒加载图片组件，适用于Angular 2及以上版本。该组件代码量小，依赖少，支持图片和背景图片的懒加载，且兼容多种浏览器。文章详细解释了如何安装和使用该组件，包括在不同场景下的应用示例。

ng-lazyload-image

Lazy image loader for Angular ≥ v2

About 150 loc and no dependencies (except for angular and rxjs of course)

Demo: http://tjoskar.github.io/ng-lazyload-image/

Requirement

The browser you targeting need to have support of WeakMap and String.prototype.includes. If you need to support an older browser (like IE) you will need to include polyfill for WeakMap and String.prototype.includes (see https://github.com/zloirock/core-js for example).

Installation


$ npm install ng-lazyload-image --save

And then include it in your module (see app.module.ts):


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 {}

Usages


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



@Component({

selector: 'image',

template: `

<img [defaultImage]="defaultImage" [lazyLoad]="image" [offset]="offset">

`

})

class ImageComponent {

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

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

offset = 100;

}

It also supports background images, by using backgroundImage:


@Component({

selector: 'image',

template: `

<div [defaultImage]="defaultImage" [lazyLoad]="image" [offset]="offset"></div>

<!--

After it has been loaded the div will transform into:

<div class="ng-lazyloaded" style="background-image: url('https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg');"></div>

-->

`

})

class ImageComponent {

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

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

offset = 100;

}

If using responsive images in a plain <img> tag, you’ll need to set the useSrcset attribute to true:


@Component({

selector: 'image',

template: `

<img [defaultImage]="defaultImage"

[lazyLoad]="images"

[useSrcset]="true"

[offset]="offset">

`

})

class ImageComponent {

offset = 100;

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

images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,

https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;

}

If using responsive images in a <picture> tag, set the default <img> tag as usual with lazyLoad etc. attributes.

You can use attr.lazyLoad, attr.defaultImage and attr.errorImage attributes for <source> elements.

There’s no need to set useSrcset for <source> elements, as srcset is used by default.

A simple example for a <picture> tag:


@Component({

selector: 'image',

template: `

<picture>

<source media="(min-width: {{ screen_lg }})" [attr.defaultImage]="defaultImage" [attr.lazyLoad]="image2">

<source media="(min-width: {{ screen_md }})" [attr.defaultImage]="defaultImage" [attr.lazyLoad]="image3">

<img [defaultImage]="defaultImage"

[lazyLoad]="image1"

[offset]="offset">

</picture>

`

})

class ImageComponent {

offset = 100;

screen_lg = '1200px';

screen_md = '992px';

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

image1 = 'https://images.unsplash.com/photo-1422004707501-e8dad229e17a?fm=jpg';

image2 = 'https://images.unsplash.com/photo-1439931444800-9bcc83f804a6?fm=jpg';

image3 = 'https://images.unsplash.com/photo-1417128281290-30a42da46277?fm=jpg';

}

You can (from 3.3.0) load image async or change the url on the fly, eg.


<img [lazyLoad]="image$ | async">

If you are using Ionic 2 you may need to include your own scroll observable or change the scroll target.


@Component({

selector: 'page-image',

template: `

<ion-content #container padding>

<img [defaultImage]="https://www.placecage.com/1000/1000" [lazyLoad]="lazyLoadImage" [scrollObservable]="container.ionScroll" />

</ion-content>

`

})

export class AboutPage {

lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';

}

In case of using ion-slides in Ionic 2+, you can include your own scroll observable as below.


@Component({

selector: 'page-image',

template: `

<ion-content #container padding>

<img [defaultImage]="https://www.placecage.com/1000/1000" [lazyLoad]="lazyLoadImage" [scrollObservable]="container.ionSlideWillChange" />

</ion-content>

`

})

export class AboutPage {

lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';

}

See example folder for more usages.

FAQ

Q How can I manually trigger the loading of images?

A See: https://github.com/tjoskar/ng-lazyload-image/issues/197

Q Does this library work with ionic or some other wrapper for Angular?

A Yes, but ionic and some other library wraps the whole document inside an other div so you might need to create your own scroll listener. https://github.com/tjoskar/ng-lazyload-image/issues?utf8=✓&q=is%3Aissue+Ionic

Q How can I add a transition effect between the default image and the lazy loaded image?

A See: https://github.com/tjoskar/ng-lazyload-image/issues/300

Q I can’t get it to work with electron. Can you help me?

A Make sure you uses the right file path.

Q I can’t get it to work. Can you help me?

A Sure, create an issue and describe your issue in as much detail as possible.