Introduce hooks

[tjoskar]

This makes it possible to hook into the loading process as discussed in #304

This makes it easy to create your own lazyloader. Lets look at some examples:

This will use a scroll listener as before so no breaking changes.

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, LazyLoadImageModule ],
    bootstrap: [ AppComponent ]
})

It is however now possible to add hooks so you can create your own, custom, loaders. For example, let's say you want to fetch an image with some custom headers. If so, you can create a custom hook to fetch the image:

function loadImage({ imagePath }) {
  return await fetch(imagePath, {
    headers: {
      Authorization: 'Bearer ...'
    }
  }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));
}

And then pass it to LazyLoadImageModule:

imports: [
  BrowserModule,
  LazyLoadImageModule.forRoot({ loadImage })
],

The hooks that are possible to overwrite is:

getObservable // creates a custom observable (ex. from scroll events)
isVisible // a function to check if the images is loaded or not
loadImage // a function to load the image
setLoadedImage // set the image url to the DOM
setErrorImage // set the error image url to the DOM in case of an error
setup // setup function (setting the default image)
finally // fanction to call after the image has been loaded

I made it also possible to create a preset to set all the functions above. I have created two preset. One for scroll events and one for IntersectionObserver. So it is now possible to use IntersectionObserver by just importing the intersectionObserverPreset:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [
      BrowserModule,
      LazyLoadImageModule.forRoot({
        preset: intersectionObserverPreset
      })
    ],
    bootstrap: [ AppComponent ]
})
export class MyAppModule {}

I have also publised [email protected] so you can try it out and I created a demo page here: https://stackblitz.com/edit/angular-lazyload-intersection-observer?file=src%2Fapp%2Fapp.module.ts

So what do you think? @rimlin @sapierens

Closes: #356 #304 #362

Easy fixes: #322 #323 #334

Easy fixes if intersection observer is possible: #355 #360

[rimlin]

Looks good! Also i think what were need to update examples, i can do it later.

[tjoskar]

@rimlin, sounds good.
The current examples are however still valid but I think we should add some with intersection observer and/or make it more clear that intersection observer is simpler ;)