Author: | thisissoon |
---|---|
Official Page: | Go to website |
Publish Date: | December 5, 2017 |
License: | MIT |
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>