Skip to content

doughlass/ngx-lazy-load-images

 
 

Repository files navigation

ngx-lazy-load-images (Angular 15+)

Forked from ngx-lazy-load-images by jesusbotella.

ngx-lazy-load-images is an image lazy load library for Angular 15+.

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.

Installation

You can install the library via npm with either command:

npm install ngx-lazy-load-images --save
yarn add ngx-lazy-load-images

Usage

1. Import the 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 {}

2. Use the lazy-load-images directive

Add 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>

3. Set the data-src or data-background-src attribute

Set 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>

4. Have fun 🎉

Performance

Browser Compatibility

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:

Chrome
26+
Firefox
14+
Safari
6+
Edge
Internet Explorer
11+
Opera
15+
Android
4.4+

License

MIT

FOSSA Status

Contributions

Open to contributions and help with upkeeping and enhancing either the code or dependancies.

About

Image lazy load library for Angular 15+

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 100.0%