Ng-lazyload-image: Bilder laden, die im Ansichtsfenster angezeigt werden

Das klingt seltsam. Welche Version von ng-lazyload-image Sie? Welchen Browser verwendest du? Ist dies das gleiche Verhalten in anderen Browsern (Firefox/Chrome/Safari/Edige/IOS/Android)? Sind Sie sicher, dass das Bild erst geladen wird, wenn Sie mit dem Scrollen beginnen?
Ist es möglich, ein kleines Repo zu erstellen, um den Fehler zu reproduzieren? Oder ein Gif/Video aufnehmen?

Ich habe das gleiche Problem mit Chrome, Firefox und Edge. Ich verwende [hidden] (standardmäßig wahr) für Komponenten, die träge geladene Bilder haben.
Wenn ausgeblendet in false geändert wird, rendert die Komponente, aber das Bild ist Standard (Loader), nur Scrollen lässt Bilder erscheinen.

Mein img-Tag in der Komponente:

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

Und meine Komponente:

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

Hallo @zieka ,

Das Problem ist, dass das Bild ausgeblendet wird, wenn ng-lazyload-image und das Bild daher außerhalb des Ansichtsfensters bedroht (das Bild hat keine Position, Sinus es wird nicht gerendert und es gibt keine Möglichkeit zu wissen, wann es sichtbar wird, und erneut validieren, wenn es sich im Ansichtsfenster befindet).

Es gibt jedoch drei Möglichkeiten, dies zu lösen.

1. Verwendung von IntersectionObserver (empfohlene Methode)
   Fügen Sie einfach intersectionObserverPreset in Ihr Modul ein:

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

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

1. Verwenden Sie sichtbar statt versteckt. Wenn das Bild noch seine Position hat, wenn es nicht sichtbar ist.
2. Erstellen Sie Ihre eigenen scrollObservable , die Scroll-Ereignisse und das Ereignis, das activeRecipeIndex ändert (in Ihrem Fall), zusammenführen. Ich kann Ihnen dabei helfen, wenn Sie möchten.

hallo, @tjoskar, ich habe dieses Problem irgendwie gelöst, [offset]=800 , aber ich bin mir nicht sicher, ob dies der beste Weg ist, es zu beheben, was denkst du?

Danke @tjoskar es funktioniert :) Ich wähle die erste Option :)