@greg-md/ng-lazy-load
v1.0.9
Published
Lazy loading images with Angular.
Downloads
6
Maintainers
Readme
Ng Lazy Load
Lazy loading images with Angular.
Table of Contents:
Installation
To install this library, run:
$ npm install @greg-md/ng-lazy-load --save
How It Works
Setting up in a module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// 1. Import lazy loading module;
import { LazyLoadModule } from '@greg-md/ng-lazy-load';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
// 2. Register lazy loading module.
LazyLoadModule,
],
declarations: [
AppComponent,
],
bootstrap: [AppComponent]
})
export class AppModule { }
Using in templates
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<img src="loading.jpg" lazy-load="lazy-image.jpg" />
`,
})
export class AppComponent { }
Directive Attributes
threshold
By default images are loaded when they appear on the screen. If you want images to load earlier, use threshold parameter. Setting threshold to 200 causes image to load 200 pixels before it appears on viewport.
Example:
<img src="loading.jpg" lazy-load="lazy-image.jpg" threshold="200" />
container
You can also use directive for images inside scrolling container, such as div with scrollbar. Just pass the container element.
Example:
<div #container>
<img src="loading.jpg" lazy-load="lazy-image.jpg" threshold="200" [container]="container" />
</div>
bg-src
Set default image in background and lazy load image directly in the src
attribute.
Useful with non-effective image URLs. This will avoid to load lazy image twice.
Example:
<img bg-src="loading.jpg" lazy-load="lazy-image.jpg" width="200" height="200" />
License
MIT © Grigorii Duca