https://github.com/jaspero/ng-image-preload
An image preload module for Angular using IntersectionObserver in favour of scroll listener's.
https://github.com/jaspero/ng-image-preload
angular image-preloader intersectionobserver lazy-loading
Last synced: 7 months ago
JSON representation
An image preload module for Angular using IntersectionObserver in favour of scroll listener's.
- Host: GitHub
- URL: https://github.com/jaspero/ng-image-preload
- Owner: Jaspero
- License: mit
- Created: 2017-08-11T19:09:30.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-08-19T17:05:36.000Z (over 3 years ago)
- Last Synced: 2024-03-18T19:51:06.819Z (almost 2 years ago)
- Topics: angular, image-preloader, intersectionobserver, lazy-loading
- Language: TypeScript
- Homepage: https://jaspero.github.io/ng-image-preload/
- Size: 16.1 MB
- Stars: 8
- Watchers: 5
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/semantic-release/semantic-release)
[](https://circleci.com/gh/Jaspero/ng-image/preload/tree/master)
[](https://www.npmjs.com/package/@jaspero/ng-image-preload)
# NG Image Preload
An image preload module for Angular using [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) in favour of scroll listener's.
```
npm install --save @jaspero/ng-image-preload
```
## Example
A demo can be found here:
https://jaspero.github.io/ng-image-preload/
## Setup
Import `JpImagePreloaderModule` in your `@NgModule`:
```ts
@NgModule({
imports: [
JpImagePreloaderModule.forRoot()
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
```
Then in your component initialize the service:
```ts
class AppComponent implements OnInit {
constructor(private preload: JpPreloadService) {}
ngOnInit() {
this.preload.initialize();
}
}
```
The `initialize` method accepts an optional `options` object:
### Options
| Name | Type | Default |
| ---------- | ------ | ------- |
| rootMargin | string | 0 50px |
| threshold | number | 0.1 |
A description for this options can be found [here](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
## How To Use
There are two ways to consume the library. Using the service or the directive.
### Service
Inject the `PreloadService` in to a component.
```ts
constructor(
private preload: PreloadService
) {}
// Then add an image element to the que like this:
addImage(element: HTMLElement, config: ElementConfig) {
this.preload.addImage(element, config);
}
```
### Directive
You can add the `jpPreload` directive to an `img` element like this:
```html
```
The `initialImage.jpg` will not be preloaded, this is usually a spinner or some other light image.
The `someImage.jpg` image will be shown when the element is in view.
If you need to preload a background image the `jpPreload` directive can be placed on any html element like this:
```html
```
To show an image initially you can add a css background-image to the class. This image will then be replaced when the element is in view.
You can also attach a fallback (loads if the requested image fails) like this:
```html
```
## License
MIT © [Jaspero co.](mailto:info@jaspero.co)