Ng-lazyload-image: ビューポートに表示される画像を読み込む

それは奇妙に聞こえます。 どのバージョンのng-lazyload-imageを使用していますか？ どのブラウザを使用していますか？ これは他のブラウザ（firefox / chrome / safari / edige / ios / android）でも同じ動作ですか？ スクロールを開始するまで画像が読み込まれませんか？
エラーを再現するために小さなリポジトリを作成することは可能ですか？ またはgif /ビデオを記録しますか？

Chrome、Firefox、Edgeでも同じ問題が発生します。 遅延ロードされた画像があるコンポーネントで[hidden]（デフォルトではtrue）を使用しています。
非表示がfalseに変わると、コンポーネントはレンダリングされますが、画像はデフォルト（ローダー）であり、スクロールするだけで画像が表示されます。

コンポーネント内の私のimgタグ：

<img [lazyLoad]="recipe.image"
          [offset]="100"
          src="ng-assets/animations/recipe-loader.gif">

そして私のコンポーネント：

<app-recipe *ngFor="let recipe of recipes; let i = index;"
                     [hidden]="activeRecipeIndex !== i"
                     [recipe]="recipe">
</app-recipe>

こんにちは@zieka 、

問題は、 ng-lazyload-imageが開始されると画像が非表示になり、ビューポートの外側として画像が脅かされることです（画像には位置がなく、レンダリングされていないため、いつ表示されるかを知る方法がありません。ビューポートにあるかどうかを再検証します）。

ただし、これを解決するには3つの方法があります。

1. IntersectionObserverの使用（推奨される方法）
   モジュールにintersectionObserverPresetを追加するだけです。

import { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';

...
LazyLoadImageModule.forRoot({
  preset: intersectionObserverPreset
})
...

1. 非表示ではなく表示を使用します。 画像が表示されていない場合でも、画像の位置が残っている場合。
2. スクロールイベントとactiveRecipeIndexを変更するイベント（あなたの場合）をマージする独自のscrollObservableを作成します。 あなたが望むなら、私はこれであなたを助けることができます。

こんにちは、 @ tjoskar [offset]=800を使用してこの問題を解決しましたが、それが最も適切な修正方法かどうかはわかりませんが、どう思いますか？

ありがとう@tjoskarそれは動作します:)私は最初のオプションを選択します:)