Ng-lazyload-image: Lazy load image does not work with preboot

Hi @lares83,

Thanks for letting me know. This is a quite tricky issue since there is no way to know when the image becomes visible.

A quickfix is to set offset=1 as you suggest but that will cause all images to be loaded when they become visible, even if they don't are in the viewport. This is because ng-lazyload-image have no way to know where the image is before it becomes visible and at that time it is too late (we will not get a new event until the user scrolls).

One way to fix it is to listen for the PrebootComplete event:

constructor() {
  this.scrollAndPrebootComplete$ = Observable.merge(
    Observable.fromEvent(window, 'scroll'),
    Observable.fromEvent(window, 'PrebootComplete')
  );
}

And then in the template:

<img [lazyLoad]="lazyLoadImage" [scrollObservable]="scrollAndPrebootComplete$" />

You could easily create a custom component that wraps lazyLoad and passing along scrollAndPrebootComplete$.

Another solution is to use IntersectionObserver but that requires #304 to be resolved.

Quick workaround is to set offset attribute to e.g. 1 which makes intersectsWith return true.

That's actually a bug, it shouldn't be happening. I'll open a separate issue for it.

I'm closing this. Let me know it the proposed solution above didn't work.