Skip to content

docs(app): Docs updated to reflect new event functionality #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 14, 2017
Merged

docs(app): Docs updated to reflect new event functionality #4

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6fd351b
docs(app): Docs updated to reflect new event functionality
jackhkmatthews Dec 13, 2017
2ba048a
docs(app): typo correction
jackhkmatthews Dec 14, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
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]
Copy link

@edoparearyee edoparearyee Dec 14, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

did you mean do delete the word "image"?

Copy link
Contributor Author

@jackhkmatthews jackhkmatthews Dec 14, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Corrected

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. 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