Ng-lazyload-image: L'image de chargement paresseux ne fonctionne pas avec le pré-démarrage

Salut @lares83 ,

Merci de me le faire savoir. C'est un problème assez délicat car il n'y a aucun moyen de savoir quand l'image devient visible.

Une solution rapide consiste à définir offset=1 comme vous le suggérez, mais cela entraînera le chargement de toutes les images lorsqu'elles deviendront visibles, même si elles ne sont pas dans la fenêtre d'affichage. C'est parce que ng-lazyload-image n'a aucun moyen de savoir où se trouve l'image avant qu'elle ne devienne visible et à ce moment-là, il est trop tard (nous n'obtiendrons pas de nouvel événement tant que l'utilisateur n'aura pas fait défiler).

Une façon de résoudre ce problème est d'écouter l'événement PrebootComplete :

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

Et puis dans le modèle :

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

Vous pouvez facilement créer un composant personnalisé qui enveloppe lazyLoad et transmet scrollAndPrebootComplete$ .

Une autre solution consiste à utiliser IntersectionObserver mais cela nécessite la résolution de #304.

Une solution de contournement rapide consiste à définir l'attribut offset sur par exemple 1, ce qui rend intersectsWith vrai.

C'est en fait un bug, ça ne devrait pas arriver. Je vais ouvrir un sujet séparé pour ça.

Je ferme ça. Faites-moi savoir que la solution proposée ci-dessus n'a pas fonctionné.