Progressive Image

Progressive Image

Progressive image loading

$5.00

CodExplorerLegacy

CodExplorerLegacy

Member since 2015

Details

Version:
1.0
Ionic:
3.x  
Platforms:
iOS, Android  
Released:
4 years ago
Updated:
3 years ago
Category:
Plugins
Tags:
,

Progressive Image for Angular v2/v4 and Ionic v2/v3 is the component for better loading of a large image in your app (demo). In background it uses stackblur-canvas, so don't forget to install it as (npm) dependency in your app.

Installation:

  • Download the zip file and unzip it;
  • Copy files from mama-progressive-image/src and paste them into src folder within your project;
  • Import components in app.module.ts:

```javascript import { MamaStackBlur } from 'path/to/mama-stack-blur'; import { MamaProgressiveImage } from 'path/to/mama-progressive-image'; ...

@NgModule({ declarations: [ ..., MamaStackBlur, MamaProgressiveImage ], ... }) export class AppModule {} ```

Usage:

In your view, add:

html <!-- Other content --> <mama-progressive-image [lowUrl]="image.lowUrl" [highUrl]="image.highUrl" [width]="image.width" [height]="image.height"> </mama-progressive-image> <!-- Other content -->

or with custom progress overlay over image:

html <!-- Other content --> <mama-progressive-image [lowUrl]="image.lowUrl" [highUrl]="image.highUrl" [width]="image.width" [height]="image.height"> <div data-overlay ...> <!-- Custom overlay --> </div> </mama-progressive-image> <!-- Other content -->

Options:
  • [lowUrl] (required string) - url of a low quality image to display and blur before HQ image is loaded and displayed;
  • [highUrl] (required string) - url of a HQ image to be displayed;
  • [width] (required number) - width of an image;
  • [height] (required number) - height of an image;
  • [blurRadius] (optional number, default is 10) - the radius of the blur;
  • [blurAlpha] (optional boolean, default is false) - if a RGBA image is blurred;
  • Custom progress overlay child needs to have data-overlay attribute to work.