@studiohyperdrive/ngx-images
TypeScript icon, indicating that this package has built-in type declarations

15.0.1 • Public • Published

Angular Tools: Images (@studiohyperdrive/ngx-images)

Install the package first:

npm install @studiohyperdrive/ngx-images

Import the Image module in your module:

import { ImagesModule } from '@studiohyperdrive/ngx-images';

@NgModule({
	imports: [
		ImagesModule
	]
})
export class MyModule {}

1. progressive loading component

The component first renders a blurred version of the low-resolution image. Once the high-resolution image is loaded it will be rendered on top. Small animations make sure that the transitions are smooth.

On very slow networks the low-resolution image will also need a little time to load. That is why there is a solid color container as placeholder. You can customise this color.

tip: use a very small image (as big as an icon) as low-resolution image, a file smaller than 2kb is ideal. Don't worry, the blur will make sure the image doesn't appear pixelated.

usage:

<img-progressive-image-loading
	lowResImg="https://link/to/low/resolution/image"
	highResImg="https://link/to/high/resolution/image">
</img-progressive-image-loading>

options:

  • className: string: sets a chosen classname on image wrapper.
  • backgroundColor: string: sets background-color of placeholder.

build information

This project has been build with:

  • Angular CLI : 11.2.1
  • Angular: 11.2.1
  • nodejs: 12.19.0
  • npm: 6.14.8

For a complete list of packages and version check out the package.json file.

Readme

Keywords

none

Package Sidebar

Install

npm i @studiohyperdrive/ngx-images

Weekly Downloads

1

Version

15.0.1

License

none

Unpacked Size

35 kB

Total Files

14

Last publish

Collaborators

  • npieter
  • wouterheirstrate
  • ekincia
  • bertyhell
  • shd-developer
  • ian-emsens-shd
  • jeroenvalcke
  • tom-odb
  • brilniels
  • thomasbormans
  • sanderh
  • laurenspeeters
  • rednas
  • denisvalcke
  • ibenvandeveire