@andres-oshiro/ng-lazy-load-image v1.0.0

Demo

Visit the demo page.

Source code

Github repository.

Installation

npm i @andres-oshiro/ng-lazy-load-image

Usage

<img anLazyLoadImage [imgSrc]="${imgUrl}" />

Options

You can pass as option a root element, root margin and threshold.

sample-list.component.html

<div id="root">
  ...

  <img anLazyLoadImage [lazyLoadOptions]="OPTIONS" [imgSrc]="${imgUrl}" />
</div>

sample-list-component.ts

@Component(...)
export class SampleListComponent {
  public readonly OPTIONS: LazyLoadOptions = {
    onErrorImgSrc: this.errorImageSrc,
    root: this.document.querySelector('#root'),
    rootMargin: '0px 0px 0px 0px',
    threshold: 0.5
  };
}

Old Browser

anLazyLoadImage uses IntersectionObserver internally. To support old browsers you will need to install IntersectionObserver polyfill.

npm install intersection-observer

After install, import it at Angular's polyfill.ts

/**********************************************************
 * APPLICATION IMPORTS
 */

import 'intersection-observer';

*

If your project only needs to support the latest version of Chrome, you can use the browser's native lazy loading.