Ng-lazyload-image: charger les images qui apparaissent dans la fenêtre

Ça a l'air bizarre. Quelle version de ng-lazyload-image utilisez-vous ? Quel navigateur utilisez-vous? Est-ce le même comportement dans d'autres navigateurs (firefox/chrome/safari/edige/ios/android) ? Êtes-vous sûr que l'image n'est pas chargée tant que vous n'avez pas commencé à faire défiler ?
Est-il possible de créer un petit repo pour reproduire l'erreur ? Ou enregistrer un gif/vidéo ?

J'ai le même problème sur Chrome, Firefox et Edge. J'utilise [hidden] (true par défaut) sur les composants qui ont des images chargées paresseux.
Lorsque masqué passe à false, le composant est rendu mais l'image est par défaut (chargeur), seul le défilement fait apparaître les images.

Ma balise img dans le composant :

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

Et mon composant :

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

Salut @zieka ,

Le problème est que l'image est masquée lorsque ng-lazyload-image en jeu et menacera donc l'image comme en dehors de la fenêtre d'affichage (l'image n'a pas de position, car elle n'est pas rendue et il n'y a aucun moyen de savoir quand elle devient visible, et revalider s'il est dans la fenêtre).

Il existe cependant trois manières de résoudre ce problème.

1. Utilisation d'IntersectionObserver (méthode recommandée)
   Ajoutez simplement intersectionObserverPreset dans votre module :

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

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

1. Utilisez visible au lieu de caché. Si l'image a toujours sa position si elle n'est pas visible.
2. Créez votre propre scrollObservable qui fusionne les événements de défilement et l'événement qui change activeRecipeIndex (dans votre cas). Je peux t'aider avec ça si tu veux.

bonjour, @tjoskar j'ai en [offset]=800 , mais je ne sais pas si c'est la façon la plus appropriée de le résoudre, qu'en pensez-vous ?

Merci @tjoskar ça marche :) Je choisis la première option :)