Not a Propaganda Machine

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

    0.0.5 • Public • Published

    Introduction

    Angular directive to load images lazily. Supports Universal SSR.

    It is using Intersection Observer API and falls back to scroll detection for unsuppoted browsers.

    Installation

    npm install ng-image-lazy-load

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { LazyLoadModule } from 'ng-image-lazy-load';
    import { AppComponent } from './app.component';
     
    @NgModule({
        declarations: [ AppComponent ],
        imports: [ BrowserModule, LazyLoadModule ],
        bootstrap: [ AppComponent ]
    })
    export class MyAppModule {}

    Usage

    Add appLazyLoad directive to the image and set the source url: [src]=<path to image>

    <figure>
      <img appLazyLoad [src]="'https://images.unsplash.com/photo-1517867134921-7623876aaaa9?ixlib=rb-0.3.5&s=b5cc7c86ffff07028b46ba92ca7c5897&auto=format&fit=crop&w=2468&q=80'">
      <div>Image by Sebastián León Prado, unsplash</div>
    </figure>

    Demo

    demo on stackblitz.io

    Install

    npm i ng-image-lazy-load

    DownloadsWeekly Downloads

    5

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    129 kB

    Total Files

    23

    Last publish

    Collaborators

    • dhayhak