Skip to content

An image preload module for Angular using IntersectionObserver in favour of scroll listener's.

License

Notifications You must be signed in to change notification settings

Jaspero/ng-image-preload

Repository files navigation

semantic-release CircleCI NPM Version

NG Image Preload

An image preload module for Angular using IntersectionObserver 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:

@NgModule({
    imports: [
        JpImagePreloaderModule.forRoot()
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Then in your component initialize the service:

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.

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.

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:

<img src="initialImage.jpg" jpPreload="someImage.jpg"></img>

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:

<div class="some-element" jpPreload="someImage.jpg"></div>

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:

<img
  src="initialImage.jpg"
  jpPreload="someImage.jpg"
  fallback="someFallback.jpg"
/>

License

MIT © Jaspero co.