11# Angular Image Loader
22
3- [ ![ Build Status] [ travis -badge]] [ travis -badge-url]
3+ [ ![ Build Status] [ circle -badge]] [ circle -badge-url]
44[ ![ Coverage Status] [ coveralls-badge ]] [ coveralls-badge-url ]
55[ ![ Commitizen friendly] [ commitizen-badge ]] [ commitizen ]
66[ ![ code style: prettier] [ prettier-badge ]] [ prettier-badge-url ]
77
8- This project was generated with [ Angular CLI] [ angular-cli ] version 1.5.4.
9-
108A simple progressive/responsive/lazy loading image library for [ Angular] [ angular ] that detects browser size and loads the appropriate image only when the element is in view. Classes are attributed and events emited on image loads. This package requires [ @thisissoon/angular-inviewport ] [ angular-inviewport ] .
119
1210<img src =" https://raw.githubusercontent.com/thisissoon/angular-image-loader/master/src/assets/example.gif " alt =" example " >
@@ -28,21 +26,21 @@ This is a simple library for [Angular][angular], implemented in the [Angular Pac
2826``` ts
2927import {
3028 ImageLoaderModule ,
31- VideoLoaderModule
29+ VideoLoaderModule ,
3230} from ' @thisissoon/angular-image-loader' ;
3331import { InViewportModule , WindowRef } from ' @thisissoon/angular-inviewport' ;
3432
3533// Provide window object for platform browser
3634export const providers: Provider [] = [
37- { provide: WindowRef , useFactory : () => window }
35+ { provide: WindowRef , useFactory : () => window },
3836];
3937
4038@NgModule ({
4139 imports: [
4240 InViewportModule .forRoot (providers ),
4341 ImageLoaderModule , // Only this import required if using just the image loader
44- VideoLoaderModule // Only this import required if using just the video loader
45- ]
42+ VideoLoaderModule , // Only this import required if using just the video loader
43+ ],
4644})
4745export class AppModule {}
4846```
@@ -58,8 +56,8 @@ import { InViewportModule, WindowRef } from '@thisissoon/angular-inviewport';
5856 // No need to provide WindowRef
5957 InViewportModule .forRoot (),
6058 ImageLoaderModule ,
61- VideoLoaderModule
62- ]
59+ VideoLoaderModule ,
60+ ],
6361})
6462export class AppModule {}
6563```
@@ -77,7 +75,8 @@ A working example can be found inside [/src](https://github.com/thisissoon/angul
7775 imgClass =" img"
7876 alt =" lorem ipsum"
7977 (placeholderLoaded) =" onPlaceholderLoad($event)"
80- (imageLoaded) =" onImageLoad($event)" >
78+ (imageLoaded) =" onImageLoad($event)"
79+ >
8180</sn-image-loader >
8281```
8382
@@ -88,7 +87,7 @@ export class AppComponent {
8887 sizes: Breakpoint [] = [
8988 { size: ' xs' , width: 0 },
9089 { size: ' md' , width: 768 },
91- { size: ' lg' , width: 992 }
90+ { size: ' lg' , width: 992 },
9291 ];
9392
9493 image: ResponsiveImage = {
@@ -98,19 +97,19 @@ export class AppComponent {
9897 {
9998 size: ' xs' ,
10099 x1: ' http://via.placeholder.com/150x350?text=xs+1x' ,
101- x2: ' http://via.placeholder.com/300x700?text=xs+2x'
100+ x2: ' http://via.placeholder.com/300x700?text=xs+2x' ,
102101 },
103102 {
104103 size: ' md' ,
105104 x1: ' http://via.placeholder.com/350x250?text=md+1x' ,
106- x2: ' http://via.placeholder.com/700x500?text=md+2x'
105+ x2: ' http://via.placeholder.com/700x500?text=md+2x' ,
107106 },
108107 {
109108 size: ' lg' ,
110109 x1: ' http://via.placeholder.com/700x400?text=lg+1x' ,
111- x2: ' http://via.placeholder.com/1400x800?text=lg+2x'
112- }
113- ]
110+ x2: ' http://via.placeholder.com/1400x800?text=lg+2x' ,
111+ },
112+ ],
114113 };
115114
116115 public onPlaceholderLoad(imageLoadedEvent : ImageLoadedEvent ) {
@@ -147,7 +146,8 @@ export class AppComponent {
147146 [sizes] =" sizes"
148147 imgClass =" img"
149148 alt =" lorem ipsum"
150- #imgEl >
149+ #imgEl
150+ >
151151</sn-image-loader >
152152
153153<button (click) =" imgEl.checkInViewportStatus()" >Check status</button >
@@ -168,7 +168,8 @@ export class AppComponent {
168168 [playsInline] =" true"
169169 type =" video/mp4"
170170 videoClass =" video"
171- posterClass =" img" >
171+ posterClass =" img"
172+ >
172173</sn-video-loader >
173174```
174175
@@ -179,30 +180,30 @@ export class AppComponent {
179180 sizes: Breakpoint [] = [
180181 { size: ' xs' , width: 0 },
181182 { size: ' md' , width: 768 },
182- { size: ' lg' , width: 992 }
183+ { size: ' lg' , width: 992 },
183184 ];
184185
185186 video: ResponsiveVideo = {
186187 videos: [
187188 {
188189 size: ' xs' ,
189190 url:
190- ' http://res.cloudinary.com/thisissoon/video/upload/ac_none,c_fill,h_568,q_80,w_320/v1517616795/demos/jellyfish-25-mbps-hd-hevc.mp4'
191+ ' http://res.cloudinary.com/thisissoon/video/upload/ac_none,c_fill,h_568,q_80,w_320/v1517616795/demos/jellyfish-25-mbps-hd-hevc.mp4' ,
191192 },
192193 {
193194 size: ' md' ,
194195 url:
195- ' http://res.cloudinary.com/thisissoon/video/upload/ac_none,c_fill,h_1024,q_80,w_768/v1517616795/demos/jellyfish-25-mbps-hd-hevc.mp4'
196+ ' http://res.cloudinary.com/thisissoon/video/upload/ac_none,c_fill,h_1024,q_80,w_768/v1517616795/demos/jellyfish-25-mbps-hd-hevc.mp4' ,
196197 },
197198 {
198199 size: ' lg' ,
199200 url:
200- ' http://res.cloudinary.com/thisissoon/video/upload/ac_none,c_fill,h_720,q_80,w_1280/v1517616795/demos/jellyfish-25-mbps-hd-hevc.mp4'
201- }
201+ ' http://res.cloudinary.com/thisissoon/video/upload/ac_none,c_fill,h_720,q_80,w_1280/v1517616795/demos/jellyfish-25-mbps-hd-hevc.mp4' ,
202+ },
202203 ],
203204 poster: {
204205 // Responsive image, the same object as used for the image loader
205- }
206+ },
206207 };
207208}
208209```
@@ -221,7 +222,8 @@ export class AppComponent {
221222 type =" video/mp4"
222223 videoClass =" video"
223224 posterClass =" img"
224- #videoEl >
225+ #videoEl
226+ >
225227</sn-video-loader >
226228
227229<button (click) =" videoEl.checkInViewportStatus()" >Check status</button >
@@ -259,8 +261,8 @@ Run `npm run release` to create a new release. This will use [Standard Version][
259261
260262To get more help on the Angular CLI use ` ng help ` or go check out the [ Angular CLI README] [ angular-cli-readme ] .
261263
262- [ travis -badge] : https://travis-ci.org /thisissoon/angular-image-loader.svg?branch=master
263- [ travis -badge-url] : https://travis-ci.org /thisissoon/angular-image-loader
264+ [ circle -badge] : https://circleci.com/gh /thisissoon/angular-image-loader.svg?branch=master
265+ [ circle -badge-url] : https://circleci.com/gh /thisissoon/angular-image-loader
264266[ coveralls-badge ] : https://coveralls.io/repos/github/thisissoon/angular-image-loader/badge.svg?branch=master
265267[ coveralls-badge-url ] : https://coveralls.io/github/thisissoon/angular-image-loader?branch=master
266268[ prettier-badge ] : https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=shield
0 commit comments