Use IntersectionObserver

[rimlin]

Idea

Propose to use new browser api - IntersectionObserver

However this api is not supported in some browsers (ref), i suggest to use it not instead of current implementation, but as an addition. In example, we can provide configuration options to imported module, where we can set preferred detection mechanism.

Usage

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

const options: LazyLoadImageOptions = {
  preferredMode: LazyLoadMode.SCROLL_OBSERVER // or LazyLoadMode.INTERSECTION_OBSERVER
}

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

In condition if user set LazyLoadMode.INTERSECTION_OBSERVER (which mean what he want use intersection api) and browser will not support this api we will use standart scroll observer (LazyLoadMode.SCROLL_OBSERVER).

Why

Intersection api is more fast, give a more performance and take responsibility to calculate check if the element is in the viewport.

[tjoskar]

Hi @rimlin,

Yes, I'm so with you on this. In fact; there is an old issue on this #13. The time was not right then but I think it is now, especially with #304

I also did create a lazyload lib for react with IntersectionObserver https://github.com/tjoskar/react-lazyload-img

I will try to take a look at it as soon as possible but I will gladly accept all help I can get.

[tjoskar]

Fixed in #365 and in version 2.1.0