ngx-progressive-img-loader

Ngx-progressive-img-loader

Ngx-progressive-img-loader is a simple progressive image loader for Angular4+. It's easy to use and yet flexible. It uses the blur low resolution transition to high resolution technique to achieve a sleek progressive loading.

Demo

ngx-progressive-img-loader demo

See a Ionic 3 demo on stackblitz.com Also see a demo on stackblitz.com

Features

No use of external dependencies, implemented with Angular APIs.
Responsive progressive placeholder and images.
Provides API to maintain aspect ratio of the pre-loaded image.
Very fast and a light-weight library.
Provides API for easy reuse and out-of-box styling in your project.
Applies nice blur and transitioning to achieve a sleek pre-loading feel.
Ngx-progressive-img-loader can serve as a parent for other components.

Install

npm i ngx-progressive-img-loader --save

Open your module file e.g app.module.ts and update imports array

import  {  NgxProgressiveImgLoaderModule  }  from  'ngx-progressive-img-loader';
...
imports: [
...
NgxProgressiveImgLoaderModule
...
]

And that's all.

Usage

All APIs

<ngx-progressive-img-loader
    [height]="'320px'"
    [width]="'100%'"
    (imageLoaded)="onImgLoad($event)"
    (thumbnailLoaded)="onThumbLoad($event)"
    [overlayTint]="'rgba(0,0,0,0)'"
    [preserveAspectRatio]="true"
    [placeholderBgColor]="'grey'"
    [placeholderImg]="'url-to-placeholder-image'"
    [img]="'url-to-high-res-image'"
    [thumbnail]="'url-to-very-low-res-image'"
    [fallbackImg]="'url-to-fall-back-image'">
    <!-- content goes here (optional) -->
</ngx-progressive-img-loader>

[height] : The height of the pre-loaded image. (required!)
[width]: The width of the pre-loaded image. (required!)
(imageLoaded): Event fired on success or error in loading of the high resolution image. (required!)
(thumbnailLoaded): Event fired on success or error in loading of the low res/thumbnail image. (required!)
[overlayTint]: Adds overlay tint/color/shade to your preloaded image. (optional)
[preserveAspectRatio]: If true, the pre-loaded image will fit into the pre-loader container without losing it's aspect ratio. If false, then it won't fit to aspect ratio. default: false; (optional)
[placeholderBgColor]: The background color of the image pre-loader container element. (optional)
[placeholderImg]: The background image of the image pre-loader container element. (optional)
[img]: The URL to the high resolution image you want to load. (required)
[thumbnail]: The URL to the very low quality, thumbnail sized version of the high resolution image you want to load. (required)
[fallbackImg]: The URL to the image to load if the high resolution image you want to load failed loading. (optional)

Note: You can place components or html elements inside the <ngx-progressive-img-loader> // your content goes here </ngx-progressive-img-loader> so as the component can serve as a parent element or background for the contents you want to place in it.

Events

<ngx-progressive-img-loader> component emits two events to it's parent component.

(imageLoaded): This output can be used to handle events emitted, when the high resolution image you want to load encounter an error or successfully loaded.
(thumbnailLoaded): This output can be used to handle events emitted, when the low resolution image you want to load encounter an error or successfully loaded.

The object emitted

    // loaded: true if the image is successfully loaded, otherwise false
    {loaded:  <true|false>, event:  e}

Example

A simple example:

<ngx-progressive-img-loader
    [height]="'450px'"
    [width]="'100%'"
    (imageLoaded)="onImgLoad($event)"
    (thumbnailLoaded)="onThumbLoad($event)"
    [img]="'https://res.cloudinary.com/lasudev/image/upload/c_fill,g_center,h_1610,q_auto:best/v1530475355/meetup_pictures/IMG-20180407-WA0011.png'"
    [thumbnail]="'https://res.cloudinary.com/lasudev/image/upload/c_fill,g_center,h_100,q_auto:best/v1530475355/meetup_pictures/IMG-20180407-WA0011.png'">
</ngx-progressive-img-loader>

Then in example.component.ts:

....
onImgLoad(e)
{
    console.log("High quality image loaded?", e.loaded);
}
onThumbLoad(e)
{
    console.log("Low qaulity thumbnail loaded?", e.loaded);
}
....

Todo

Implement content place holder gradient background animation.
Implement progress bar/ circle to indicate image load level.
Target for Webcomponent for other front-end frameworks to use it.

Contributing

Your commits conform to the conventions established here

ngx-progressive-img-loader