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 things like hide placeholder).

👍 Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions and pull request are welcome !

📝 License

MIT © jkvora