@studiohyperdrive/ngx-images
)
Angular Tools: 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.