Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/NathanWalker/ng2-image-lazy-load
Angular2 image lazy loader library.
https://github.com/NathanWalker/ng2-image-lazy-load
Last synced: about 1 month ago
JSON representation
Angular2 image lazy loader library.
- Host: GitHub
- URL: https://github.com/NathanWalker/ng2-image-lazy-load
- Owner: NathanWalker
- License: mit
- Created: 2015-11-12T02:00:59.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2020-09-04T00:09:38.000Z (over 4 years ago)
- Last Synced: 2024-10-17T07:30:54.612Z (about 2 months ago)
- Language: TypeScript
- Homepage: http://nathanwalker.github.io/ng2-image-lazy-load
- Size: 3.34 MB
- Stars: 160
- Watchers: 14
- Forks: 36
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular-components - ng2-image-lazy-load - Angular2 image lazy loader library. (Uncategorized / Uncategorized)
- awesome-angular-components - ng2-image-lazy-load - Angular2 image lazy loader library. (Uncategorized / Uncategorized)
README
[](https://david-dm.org/NathanWalker/ng2-image-lazy-load)
[](https://david-dm.org/NathanWalker/ng2-image-lazy-load#info=devDependencies)
# Not currently maintained
You might try using [this great lazy load lib for now](https://github.com/tjoskar/ng-lazyload-image).
The only thing the above lib doesn't have is the Web Worker support - I hope to circle back and update this lib at some point in future or contribute worker support to tjoskar's lib.
# ng2-image-lazy-load
Demo: https://ng2-image-lazy-load-demo.herokuapp.com
## Installation
```sh
npm i ng2-image-lazy-load --save
```
## Example implementation
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](https://github.com/NathanWalker/ng2-image-lazy-load/blob/master/src/public/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.
```ts
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: `
![]()
`
})
export class AppComponent {
public images: Array = [
{
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 {
}
```
### Configuration
You can configure custom headers as well as custom loading, loaded and error classes by using the `imageLazyLoadConfig` directive:
```
// view template
![]()
// Component
public lazyLoadConfig: IImageLazyLoadConfig = {
headers: {
'Authorization': 'Bearer auth-token'
},
loadingClass: 'custom-loading',
loadedClass: 'custom-loaded',
errorClass: 'custom-error'
};
```
## API
### ImageLazyLoaderService
#### Properties:
- `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}
#### Methods:
- `load(url: string, headers?: any): Promise`: Load url with optional custom headers
- `loadViaWorker(url: string, headers?: any): Promise`: Use a webworker directly to load url with optional custom headers
- `loadViaHttp(url: string, headers?: any): Promise`: Use the `Http` service directly to load url with optional custom headers
### WebWorkerService
##### This is a helper service used by the library that wraps the usage of the browser's `Worker` api, however you can use it directly if you'd like to interact with it.
#### Properties:
- `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`: At any given moment, this can be checked to see how many workers are currently activated
#### Methods:
- `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
# How to contribute
See [CONTRIBUTING](https://github.com/NathanWalker/ng2-image-lazy-load/blob/master/CONTRIBUTING.md)
# Big Thank You
This library was made possible with help from this article by [Olivier Combe](https://github.com/ocombe):
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](https://github.com/mgechev/angular2-seed) by [Minko Gechev](https://github.com/mgechev).
# License
MIT