Lazy loading images with Angular.
To install this library, run:
$ npm install @greg-md/ng-lazy-load --saveimport { 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 { }import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<img src="loading.jpg" lazy-load="lazy-image.jpg" />
`,
})
export class AppComponent { }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" />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>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" />MIT © Grigorii Duca
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent