angular-image-loader

A simple progressive/responsive/lazy loading image library for Angular 2/4+ with no other dependencies that detects browser size and loads the appropriate image on when the element is in view
0 people use it
Author: 6976199?v=3 thisissoon
Submitted by: 7836746?v=4 edoparearyee

Angular Image Loader

Build Status Coverage Status

A simple progressive/responsive/lazy loading image library for Angular (2/4+) that detects browser size and loads the appropriate image only when the element is in view. This package requires angular-inviewport

This is a simple library for Angular, implemented in the Angular Package Format v4.0.

Install

npm i @thisissoon/{angular-image-loader,angular-inviewport} --save

app.module.ts ` import { ImageLoaderModule } from '@thisissoon/angular-image-loader';

@NgModule({ imports: [ ImageLoaderModule ] }) export class AppModule { } `

Example

a working example can be found inside /src/demo folder

app.component.html

<sn-image-loader [image]="image" [sizes]="sizes" imgClass="foo" alt="lorem ipsum"></sn-image-loader>

app.component.ts

` export class AppComponent { sizes: Breakpoint[] = [ { size: 'xs', width: 0}, { size: 'md', width: 768}, { size: 'lg', width: 992}, ];

image: ResponsiveImage = { placeholder: 'http://via.placeholder.com/35x15?text=placeholder', fallback: 'http://via.placeholder.com/350x150?text=fallback', xs: { '@1x': 'http://via.placeholder.com/150x350?text=xs+1x', '@2x': 'http://via.placeholder.com/300x700?text=xs+2x' }, md: { '@1x': 'http://via.placeholder.com/350x250?text=md+1x', '@2x': 'http://via.placeholder.com/700x500?text=md+2x' }, lg: { '@1x': 'http://via.placeholder.com/700x400?text=lg+1x', '@2x': 'http://via.placeholder.com/1400x800?text=lg+2x' } }; } `

app.component.css

` .foo { transition: all .35s ease-in-out; }

.sn-image-not-loaded /deep/ .foo { filter: blur(20px); }

.sn-image-loaded /deep/ .foo { filter: blur(0px); } `

comments powered by Disqus
This page was last updated 3 months ago.