ProgressiveImageLoader

1.6KB (Min + gzip) light Weight, OnPushed angular component to progressively load Image. Supports:

• Animate Image Blur while switching URLS
• Start loading On Custom Intersection and threshold
• Custom Background Color Before loading

Installation

To add the Progressive Loader to your Angular project:

npm install --save kwh-progressive-image-loader

Once installed, add the Progressive Loader to your app.module.ts:

import { ProgressiveImageLoaderModule } from 'progressive-image-loader';

...

@NgModule({
   ...
   imports: [
     ...
     ProgressiveImageLoaderModule,
    ...
   ],
   ...
});
export class AppModule {}

Sample usage

Now you can use the Progressive loader component in your app components, for example in app.component.ts:

import { ProgressiveImageLoaderOptions } from 'progressive-image-loader';
...

@Component({...})
export class AppComponent {
    loadingOptions: ProgressiveImageLoaderOptions = {
        thumbnailUrl: <thumbnail_url>,
        originalUrl: <original_url>,
        backgroundColor: <background_color>,
        intersectionParent: <parent_to_observe_intersection>,
        blurWhileBackground: <blur_while_background_color>,
        blurWhileThumbnail: <blur_while_thumbnail_color>,
        animationTimeBetweenBackgroundAndThumbnail: <animation_time_bw_bg_and_thumbnail>,
        animationTimeBetweenThumbnailAndOriginal: <animation_time_bw_thumbnail_and_final_url>
    };
}

And in template file app.component.html:

<kwh-progressive-image-loader
[loadingOptions]="loadingOptions"
></kwh-progressive-image-loader>

Input Options

Below is the list of properties for loadingOptions

ProgressiveImageLoaderOptions

| Property | Optional | Default Value | dataType | description | | -------------- | ----- |------- | ------- | ---- | | thumbnailURL | false| - | string| thumbnail URL for the image to be loaded| | originalURL | false| - | string| Original URL for the image to be loaded| | backgroundColor | false| - | string| Background color before loading the thumbnail URL| | animationTimeBetweenBackgroundAndThumbnail | true| 300 (ms) | string| Time for which the blur should animate while applying thumbnail URL| | animationTimeBetweenThumbnailAndOriginal | true| 300 (ms) | string| Time for which the blur should animate while applying final (original) URL| | blurWhileBackground | true| 25 (px) | string| Blur value in pixels while background color is applied| | blurWhileThumbnail | true| 25 (px) | string| Blur value in pixels while thumbnail Image is applied| | intersectionParent | true| - | string| If intersection parent is provided, image will start loading once the image reaches the intersection threshold| | intersectionThreshold | true| 0.25 | string| fraction of image visible in the intersectionParent to trigger loading (between 0-1)|

Output Events

|Event| Description| OutputData |---|--------|---| | loadingFailed | When Image Loading Fails | ProgressStep

In case of failed loading, possible values of ProgressStep

|Value| Description| |--------|---| |FINAL_LOADING_FAILED | When Original Image failed to load| |THUMBNAIL_LOADING_FAILED| When Thumbnail Image Failed to load|

Further help / Suggestions

Contact me at [email protected]