Awesome Open Source
Awesome Open Source

Ng Lazy Load

npm version Build Status

Lazy loading images with Angular.

Table of Contents:


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';

  imports: [
    // 2. Register lazy loading module.
  declarations: [
  bootstrap: [AppComponent]
export class AppModule { }

Using in templates

import { Component } from '@angular/core';

  selector: 'app-root',
  template: `
    <img src="loading.jpg" lazy-load="lazy-image.jpg" />
export class AppComponent { }

Directive Attributes


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.


<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.


<div #container>
    <img src="loading.jpg" lazy-load="lazy-image.jpg" threshold="200" [container]="container" />


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.


<img bg-src="loading.jpg" lazy-load="lazy-image.jpg" width="200" height="200" />


MIT © Grigorii Duca

Huuuge Quote

I fear not the man who has practiced 10,000 programming languages once, but I fear the man who has practiced one programming language 10,000 times. #horrorsquad

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,711
typescript (10,876
angular (1,284
js (521
image (480
ts (46
lazyload (32
lazy (26
ng (16

Find Open Source By Browsing 7,000 Topics Across 59 Categories