rfx-image-loader

RfxImageLoader

Better image loading

Features

• Customize fade-in duration
• Customize fade-in timing function
• add your content to image (eg. loader)

Installation

Install the npm package:

npm install rfx-image-loader

Import module:

import { RfxImageLoaderModule } from 'rfx-image-loader';

@NgModule({
  imports: [
    RfxImageLoaderModule
  ]
})

Usage

1. add libRfxImageLoader to your container

<div libRfxImageLoader></div>

2. pass array of images (RfxImageInterface) to [imageUrls]

public images: RfxImageInterface[];

[...]

this.images = [
  { imageUrl: './assets/image.jpg', priority: 2 },
  { imageUrl: './assets/placeholder_super_low_quality.jpg', priority: 0 }
  { imageUrl: './assets/placeholder_low_quality.jpg', priority: 1 }
];

<div libRfxImageLoader [imageUrls]="images"></div>

3. pass ORIGINAL image width and height to the component

(eg. width: 8480px, height: 5600px)

<div libRfxImageLoader [imageUrls]="images" [imageWidthPx]="8480" [imageHeightPx]="5600"></div>

4. set image placeholder color (optional)

<div libRfxImageLoader [imageUrls]="images" [imageWidthPx]="8480" [imageHeightPx]="5600" placeholderColor="#fafafa"></div>

Configuration

imageUrls: RfxImageInterface[]

• array of image urls with priority;
• lower priority = lower quality image;
• the highest priority is the main image.

RfxImageInterface:

interface RfxImageInterface {
  imageUrl: string;
  priority: number;
}

placeholderColor: string

(default value: "transparent")

imageWidthPx: number

ORIGINAL image width in pixels

imageHeightPx: number

ORIGINAL image height in pixels

animationDurationMs: number

(default value: 300) animation duration in milliseconds

animationTimingFunction: string

(default value: "cubic-bezier(0.4, 0.0, 0.2, 1)") animation timing function

onImageLoaded: EventEmitter<boolean>

Demo

TODO

License

This project is licensed under the MIT License out the Angular CLI Overview and Command Reference page.