You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

kwh-progressive-image-loader

Package Overview
Dependencies
4
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

kwh-progressive-image-loader

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


Version published
Maintainers
1
Created

Readme

Source

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

PropertyOptionalDefault ValuedataTypedescription
thumbnailURLfalse-stringthumbnail URL for the image to be loaded
originalURLfalse-stringOriginal URL for the image to be loaded
backgroundColorfalse-stringBackground color before loading the thumbnail URL
animationTimeBetweenBackgroundAndThumbnailtrue300 (ms)stringTime for which the blur should animate while applying thumbnail URL
animationTimeBetweenThumbnailAndOriginaltrue300 (ms)stringTime for which the blur should animate while applying final (original) URL
blurWhileBackgroundtrue25 (px)stringBlur value in pixels while background color is applied
blurWhileThumbnailtrue25 (px)stringBlur value in pixels while thumbnail Image is applied
intersectionParenttrue-stringIf intersection parent is provided, image will start loading once the image reaches the intersection threshold
intersectionThresholdtrue0.25stringfraction of image visible in the intersectionParent to trigger loading (between 0-1)

Output Events

EventDescriptionOutputData
loadingFailedWhen Image Loading FailsProgressStep

In case of failed loading, possible values of ProgressStep

ValueDescription
FINAL_LOADING_FAILEDWhen Original Image failed to load
THUMBNAIL_LOADING_FAILEDWhen Thumbnail Image Failed to load

Further help / Suggestions

Contact me at kishinkarra@gmail.com

Keywords

FAQs

Package last updated on 13 Apr 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc