Skip to content

Commit

Permalink
docs(app): Docs updated to reflect new event functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
jackhkmatthews committed Dec 13, 2017
1 parent df4dcf2 commit 6fd351b
Showing 1 changed file with 18 additions and 3 deletions.
21 changes: 18 additions & 3 deletions README.md
Expand Up @@ -4,7 +4,7 @@

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.4.

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

<img src="https://raw.githubusercontent.com/thisissoon/angular-image-loader/master/src/assets/example.gif" alt="example">

Expand Down Expand Up @@ -39,12 +39,19 @@ export class AppModule { }

## Example

a working example can be found inside [/src](https://github.com/thisissoon/angular-image-loader/tree/master/src) folder
A working example can be found inside [/src](https://github.com/thisissoon/angular-image-loader/tree/master/src) folder.

### `app.component.html`

```html
<sn-image-loader [image]="image" [sizes]="sizes" imgClass="foo" alt="lorem ipsum"></sn-image-loader>
<sn-image-loader
[image]="image"
[sizes]="sizes"
imgClass="foo"
alt="lorem ipsum"
(imagePlaceholderLoaded)="onPlaceholderLoad($event)"
(imageLoaded)="onFullResLoad($event)">
</sn-image-loader>
```

### `app.component.ts`
Expand Down Expand Up @@ -73,6 +80,14 @@ export class AppComponent {
'@2x': 'http://via.placeholder.com/1400x800?text=lg+2x'
}
};

public onPlaceholderLoad(imageLoadedEvent: ImageLoadedEvent) {
// Do something
}

public onFullResLoad(imageLoadedEvent: ImageLoadedEvent) {
// Do something
}
}
```

Expand Down

0 comments on commit 6fd351b

Please sign in to comment.