Ng-lazyload-image: Lazy-Load-Image funktioniert nicht mit Preboot

Hallo @lares83 ,

Danke für die Information. Dies ist ein ziemlich kniffliges Problem, da es keine Möglichkeit gibt zu wissen, wann das Bild sichtbar wird.

Ein Quickfix besteht darin, offset=1 wie von Ihnen vorgeschlagen festzulegen, aber das führt dazu, dass alle Bilder geladen werden, wenn sie sichtbar werden, auch wenn sie sich nicht im Ansichtsfenster befinden. Dies liegt daran, dass ng-lazyload-image keine Möglichkeit haben, zu wissen, wo sich das Bild befindet, bevor es sichtbar wird, und es zu diesem Zeitpunkt zu spät ist (wir erhalten kein neues Ereignis, bis der Benutzer scrollt).

Eine Möglichkeit, das Problem zu beheben, besteht darin, auf das Ereignis PrebootComplete warten:

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

Und dann in der Vorlage:

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

Sie können ganz einfach eine benutzerdefinierte Komponente erstellen, die lazyLoad umschließt und scrollAndPrebootComplete$ .

Eine andere Lösung besteht darin, IntersectionObserver aber dafür muss #304 aufgelöst werden.

Eine schnelle Problemumgehung besteht darin, das Offset-Attribut auf zB 1 zu setzen, was intersectsWith zur Rückgabe true macht.

Das ist eigentlich ein Bug, das sollte nicht passieren. Ich werde dafür ein separates Thema eröffnen.

Ich schließe das. Lassen Sie mich wissen, dass die oben vorgeschlagene Lösung nicht funktioniert hat.