@greg-md/ng-lazy-load
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.9 • Public • Published

    Ng Lazy Load

    npm version Build Status

    Lazy loading images with Angular.

    Table of Contents:

    Installation

    To install this library, run:

    $ npm install @greg-md/ng-lazy-load --save

    How It Works

    Setting up in a module

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
     
    // 1. Import lazy loading module;
    import { LazyLoadModule } from '@greg-md/ng-lazy-load';
     
    import { AppComponent } from './app.component';
     
    @NgModule({
      imports: [
        BrowserModule,
        // 2. Register lazy loading module.
        LazyLoadModule,
      ],
      declarations: [
        AppComponent,
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    Using in templates

    import { Component } from '@angular/core';
     
    @Component({
      selector: 'app-root',
      template: `
        <img src="loading.jpg" lazy-load="lazy-image.jpg" />
      `,
    })
    export class AppComponent { }

    Directive Attributes

    threshold

    By default images are loaded when they appear on the screen. If you want images to load earlier, use threshold parameter. Setting threshold to 200 causes image to load 200 pixels before it appears on viewport.

    Example:

    <img src="loading.jpg" lazy-load="lazy-image.jpg" threshold="200" />

    container

    You can also use directive for images inside scrolling container, such as div with scrollbar. Just pass the container element.

    Example:

    <div #container>
        <img src="loading.jpg" lazy-load="lazy-image.jpg" threshold="200" [container]="container" />
    </div>

    bg-src

    Set default image in background and lazy load image directly in the src attribute.

    Useful with non-effective image URLs. This will avoid to load lazy image twice.

    Example:

    <img bg-src="loading.jpg" lazy-load="lazy-image.jpg" width="200" height="200" />

    License

    MIT © Grigorii Duca

    Huuuge Quote

    I fear not the man who has practiced 10,000 programming languages once, but I fear the man who has practiced one programming language 10,000 times. #horrorsquad

    Install

    npm i @greg-md/ng-lazy-load

    DownloadsWeekly Downloads

    0

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    28.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • greg-md