Novice Prime Minister

    @andres-oshiro/ng-lazy-load-image
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    an-*ngLibraries

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


    a lightweight lazyload library for Angular

    www.an-nglibraries.com

    Status npm License CircleCI

    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.

    Chrome
    Firefox
    Safari
    6+
    Edge
    Internet Explorer
    7+
    Opera
    Android
    4.4+
    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.

    Install

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

    DownloadsWeekly Downloads

    6

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    127 kB

    Total Files

    20

    Last publish

    Collaborators

    • andres-oshiro