Lazy load image does not work with preboot

[lares83]

Preboot (https://github.com/angular/preboot) makes the whole app is not visible at start which causes lazy load component not to load image - function isVisible returns false.

fromElement in rect.ts uses getBoundingClientRect which in this case returns 0 dimensions.

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

[tjoskar]

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.

[sapierens]

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.

[tjoskar]

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