Progressive Image Lazy Loading Library For Angular 2/4+

Description:

A simple progressive/responsive/lazy loading image library for Angular 2/4+ with no other dependencies that detects browser size and loads the appropriate image on when the element is in view.

Installation:

# NPM
$ npm install @thisissoon/angular-image-loader --save

Usage:

Include it in your app module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Provider } from '@angular/core';
import { InViewportModule, WindowRef } from '@thisissoon/angular-inviewport';

import { ImageLoaderModule } from './image-loader';
import { AppComponent } from './app.component';

export const getWindow = () => window;
export const providers: Provider[] = [
  { provide: WindowRef, useFactory: (getWindow) }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    InViewportModule.forRoot(providers),
    ImageLoaderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use in your app component.

<sn-image-loader
  [image]="image"
  [sizes]="sizes"
  imgClass="foo"
></sn-image-loader>

Preview: