ngx-lazyload-image

LazyLoad Image source using directive in Angular.

Installation

npm i ngx-lazyload-image --save

Changelog

See the releases page on GitHub.

Usage

Add LazyLoadImagesModule to your app module:

import { LazyLoadImagesModule } from 'ngx-lazyload-image';
 
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImagesModule],
  bootstrap: [AppComponent],
})
class AppModule {}

In your app component, simply use a [lazyload] directive input, in place [src] in image tag.

@Component({
  selector: 'app',
  template: `
    <div *ngFor="let item of lstImagesUrls;let i=index">
        <img  class="preview" [lazyload]="item.src" (imageInViewEvent)="inView(i)" (imageInViewLoadedEvent)="imageLoaded(i)"            alt="Nature Images" />
        <div class="box" *ngIf="!item.loaded"></div>
    </div>
  `
})
class AppComponent {
  private lstImagesUrls = [
    {
      src: "https://images.unsplash.com/photo-1538390019947-079c808a7315?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f59ae7d8274156b78fc89a2a223f93a3&auto=format&fit=crop&w=668&q=80",
      loaded: false
    },
   
    {
      src: "https://images.unsplash.com/photo-1538215062820-0b0097c60c5f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=762ae8c9e9c39ee9ea9c7dd50b3c710f&auto=format&fit=crop&w=772&q=80",
      loaded: false
    },
    {
      src:"https://images.unsplash.com/photo-1538238766844-22cd13f6737a?ixlib=rb-0.3.5&s=af15e80003b63cccfb88bef91e3edb46&auto=format&fit=crop&w=889&q=80",
      loaded: false
    },
  ]
 
 
  inView(index) {
    console.log("In view:", index);
    this.lstImagesUrls[index].loaded=true;
  }
 
  imageLoaded(index) {
    console.log("Image loaded:", index)
   
  }
}

Options

Inputs

Property name	Type	Description
lazyload	string	Source of the image which is to be lazyloaded.

Outputs

Property name	Description
imageInViewEvent	Emitted when image comes in viewport
imageInViewLoadedEvent	Emitted when image is loaded .( do thinsg like hide placeholder).