Ng-lazyload-image: 遅延ロードイメージはプリブートでは機能しません

こんにちは@ lares83 、

知らせてくれてありがとうございます。 画像がいつ表示されるかを知る方法がないため、これは非常に難しい問題です。

クイックフィックスは、提案どおりにoffset=1を設定することですが、これにより、ビューポートにない場合でも、すべての画像が表示されたときに読み込まれます。 これは、 ng-lazyload-imageは、画像が表示される前に画像がどこにあるかを知る方法がなく、その時点では遅すぎるためです（ユーザーがスクロールするまで新しいイベントは取得されません）。

これを修正する1つの方法は、 PrebootCompleteイベントをリッスンすることです。

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

そして、テンプレートで：

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

あなたは簡単にラップカスタムコンポーネント作成することができますlazyLoadと一緒に渡すscrollAndPrebootComplete$ 。

別の解決策はIntersectionObserverを使用することですが、これには＃304を解決する必要があります。

簡単な回避策は、offset属性をたとえば1に設定することです。これにより、intersectsWithがtrueになります。

これは実際にはバグであり、発生するはずはありません。 別の号を開きます。

これを閉じます。 上記の提案された解決策が機能しなかったことを知らせてください。