Demo: https://ng2-image-lazy-load-demo.herokuapp.com

npm i ng2-image-lazy-load --save

This library utilizes WebWorkers (https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) for background loading of images.

By default, the location of the worker file is assets/js/xhrWorker.js. You can copy this xhrWorker.js file for your own use from this repo or you can create your own.

To set a custom path to load your worker file relative to your web server root:

WebWorkerService.workerUrl = 'path/to/your/custom_worker.js' 

The example below will help illustrate this.

Also, ensure you've loaded the angular/http bundle as well as this library falls back to using Http wherever Worker is not supported.

import {BrowserModule} from "@angular/platform-browser"; import {NgModule, Component} from '@angular/core'; import {HttpModule} from '@angular/http'; import {ImageLazyLoadModule, WebWorkerService} from 'ng2-image-lazy-load'; // default: 'assets/js/xhrWorker.js' WebWorkerService.workerUrl = 'path/to/your/xhrWorker.js'; // default: true // set to false if you want to force Http instead of WebWorker WebWorkerService.enabled = true; @Component({ selector: 'app', template: `  <div imageLazyLoadArea>  <div *ngFor="let image of images">  <img [imageLazyLoadItem]="image.url"/>  </div>  </div>  ` }) export class AppComponent { public images: Array<any> = [ { name:`image 1`, url:`image.jpg` }, { name:`image 2`, url:`image_2.jpg` } ]; } @NgModule({ imports: [ BrowserModule, HttpModule, ImageLazyLoadModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { }

You can configure custom headers as well as custom loading, loaded and error classes by using the imageLazyLoadConfig directive:

// view template <div imageLazyLoadArea [imageLazyLoadConfig]="lazyLoadConfig"> <div *ngFor="let image of images"> <img [imageLazyLoadItem]="image.url"/> </div> </div> // Component public lazyLoadConfig: IImageLazyLoadConfig = { headers: { 'Authorization': 'Bearer auth-token' }, loadingClass: 'custom-loading', loadedClass: 'custom-loaded', errorClass: 'custom-error' }; 

• imageCache:any: Object where the key is the url of the image the library has already loaded and doesn't need to be loaded again. i.e., {'http://domain.com/image.png':true}

• load(url: string, headers?: any): Promise<any>: Load url with optional custom headers
• loadViaWorker(url: string, headers?: any): Promise<any>: Use a webworker directly to load url with optional custom headers
• loadViaHttp(url: string, headers?: any): Promise<any>: Use the Http service directly to load url with optional custom headers

• static supported: boolean: Determine if workers are supported
• static workerUrl: string: Used to set the path to a worker file. Defaults to 'assets/js/xhrWorker.js'
• activeWorkers: Array<any>: At any given moment, this can be checked to see how many workers are currently activated

• load(config: any, msgFn: any, errorFn?: any):number: Load a configuration with your worker and wire it to a message function and/or an error function. Returns an id which can be used to terminate the worker.
• terminate(id: number): Terminate the worker

See CONTRIBUTING

This library was made possible with help from this article by Olivier Combe: https://medium.com/@OCombe/how-to-publish-a-library-for-angular-2-on-npm-5f48cdabf435

Also, this project setup is based on the excellent angular2-seed by Minko Gechev.

MIT