Image lazy load library for Angular 2+
ngx-lazy-load-images is a image lazy load library for Angular 9+.
The library allows to lazy load images from your web application using the MutationObserver and the IntersectionObserver. Images will be loaded as soon as they enter the viewport in a non-blocking way.
It supports <img>
tags as well as background images.
Please check v1.x.x releases for support to older versions of Angular. ngx-lazy-load-images v2+ just supports Angular 9+.
You can install the library via npm with this command:
npm install ngx-lazy-load-images --save
LazyLoadImagesModule
Import LazyLoadImagesModule
from the ngx-lazy-load-images
package, and add it to the NgModule
imports array of your component.
import { NgModule } from '@angular/core';
import { LazyLoadImagesModule } from 'ngx-lazy-load-images';
@NgModule({
imports: [
LazyLoadImagesModule
]
})
export class AppComponent {}
lazy-load-images
directiveAdd the lazy-load-images
directive to the tag containing all the DOM image nodes to lazy load:
<!-- Image tags -->
<div class="image-list" lazy-load-images>
<img *ngFor="let imageUrl in images" [attr.data-src]="imageUrl">
</div>
<!-- Background images -->
<div class="image-list" lazy-load-images>
<div *ngFor="let imageUrl in images" [attr.data-background-src]="imageUrl"></div>
</div>
The container can have any HTML or components inside along with the images. But the less nodes inside the directive, the faster it will be.
Intersection Observer Configuration
If you want to make some configuration changes to the Intersection Observer, you can do it by passing an object to the lazy-load-images
directive. The object takes the Intersection Observer configuration parameters as keys.
<div class="image-list" [lazy-load-images]="{ rootMargin: '50px' }"></div>
data-src
or data-background-src
attributeSet the data-src
or data-background-src
attribute in the images or tags that you want to lazy load.
The data-src
attribute allows to lazy load images inside <img>
tags. You can define it by passing a variable to the attribute, interpolating a variable, or inserting the URL directly:
<img [attr.data-src]="imageUrlVariable">
<img attr.data-src="{{ imageUrlVariable }}">
<img data-src="https://example.com/cute_kitten.jpg">
The data-background-src
attribute lazy loads background images inside any HTML tag. It works the same way as the data-src
attribute:
<div [attr.data-background-src]="imageUrlVariable"></div>
<div attr.data-background-src="{{ imageUrlVariable }}"></div>
<div data-background-src="https://example.com/cute_kitten.jpg"></div>
Will this module make my web application worse in terms of performance?
What happens if I have lots of images, will it consume too much memory?
This library has been tested and known to work in the latest version of all major browsers.
The WICG Intersection Observer Polyfill is bundled within the module to use the Intersection Observer API in the non-compatible browsers. Avoid importing it in your application too, as it may cause unexpected issues.
However, the compatibility with older browsers is limited by the Mutation Observer
support, which is known to work in:
26+ |
14+ |
6+ |
✔ |
11+ |
15+ |
4.4+ |
MIT