Ng-lazyload-image: Comment puis-je déclencher manuellement le chargement des images?

Salut @philipgiuliani ,

Le problème est que ng-lazyload-image vérifie uniquement si l'image est dans la fenêtre lorsque l'utilisateur fait défiler. Tant qu'il n'y a pas d'événement de défilement, ng-lazyload-image ne fera rien.

Donc, pour résoudre votre cas d'utilisation, nous devons faire savoir à ng-lazyload-image que le monde qui l'entoure a changé. Il y a deux façons de faire cela:

1. Déclencher un événement de défilement. Cela va tromper ng-lazyload-image pour revalider si les images sont dans la fenêtre ou non. Mais sa solution n'est pas jolie (comme vous l'avez laissé entendre).
2. Création de votre propre flux avec des événements de défilement et fusion avec vos événements personnalisés:

// In your component

constructor() {
  this.updateSearchResult$ = new Subject();
  this.scrollAndSearch$ = Observable.merge(
    Observable.fromEvent(window, 'scroll')
    this.updateSearchResult$
  );
}

onSerachResultResponse() {
  this.updateSearchResult$.next()
}

// in your template
<img [lazyLoad]="lazyLoadImage" [customObservable]="scrollAndSearch$" />

est-ce que cela a répondu à ta question?

Je cherchais une solution à un problème similaire et je souhaite la partager, car je soupçonne que c'est là que les gens le trouveront probablement.

Problème : chargez les images après un certain délai, même si elles ne sont pas visibles dans le décalage
Solution : au lieu d'un décalage fixe, créez un observable pour les valeurs de décalage et définissez un décalage très élevé après le temps souhaité

// in the Angular 2+ component
constructor () {
  this.imageLoadOffset$ = Observable.merge(
    Observable.of(300),                 // initial offset
    Observable.of(100000).delay(5000)   // offset triggering loading after 5 seconds
  );
}

// in the template
<img [lazyLoad]="'foo.png'" [offset]="imageLoadOffset$ | async" />

Merci pour votre contribution, j'ai ajouté un lien vers ce problème dans le fichier readme.

Lorsque je fais défiler rapidement le conteneur, l'image défilée ne se charge pas. Après le défilement, je charge l'image dans la fenêtre courante. Que dois-je faire? ?

@pangshangggg , désolé mais je ne comprends pas. J'ai essayé d'utiliser google translate mais je n'ai pas compris votre question: / est-il possible pour vous d'écrire en anglais?

Dans Ionic 2/3, les images ne se chargent pas tant que l'utilisateur n'a pas commencé à faire défiler. Vous pouvez résoudre ce problème de deux manières:
Le moyen le plus laid est comme ceci:

@ViewChild(Content) container: Content;
ionViewDidEnter() {
      this.container.scrollTo(this.container.scrollLeft, this.container.scrollTop + 1);
      this.container.scrollTo(this.container.scrollLeft, this.container.scrollTop - 1);
   }

Et c'est le bon moyen:

@ViewChild(Content) container: Content;
contentLoaded: Subject<any> = new Subject();
loadAndScroll: Observable<any>;

ionViewDidEnter() {
      this.contentLoaded.next();
}
ionViewDidLoad() {
      this.loadAndScroll = Observable.merge(
         this.container.ionScroll,
         this.contentLoaded
      );
}

(in the template : [customObservable]="loadAndScroll" )

Je viens de transposer les solutions affichées ci-dessus en ionique. Rien de plus :)

Dans Angular 6 et rxjs 6, j'essaie de déclencher manuellement l'événement de chargement différé par défilement en suivant les exemples précédents, mais cela ne fonctionne pas. Toutes les images se chargent l'une après l'autre sans faire défiler la page. Ceci est mon code.

Modèle:

<div *ngFor="let image of images">
    <img [defaultImage]="defaultImage"
    [lazyLoad]="image"
    [useSrcset]="true"
    [offset]="offset" [scrollObservable]="scrollObservable" >
</div>

composant:
scrollObservable = fromEvent(window, 'scroll');

J'ai suivi cet exemple du numéro 224 où el-Davo a dit que cela résout le problème dans Angular 5

Dans Ionic 2/3, les images ne se chargent pas tant que l'utilisateur n'a pas commencé à faire défiler. Vous pouvez résoudre ce problème de deux manières:
Le moyen le plus laid est comme ceci:

@ViewChild(Content) container: Content;
ionViewDidEnter() {
      this.container.scrollTo(this.container.scrollLeft, this.container.scrollTop + 1);
      this.container.scrollTo(this.container.scrollLeft, this.container.scrollTop - 1);
   }

Et c'est le bon moyen:

@ViewChild(Content) container: Content;
contentLoaded: Subject<any> = new Subject();
loadAndScroll: Observable<any>;

ionViewDidEnter() {
      this.contentLoaded.next();
}
ionViewDidLoad() {
      this.loadAndScroll = Observable.merge(
         this.container.ionScroll,
         this.contentLoaded
      );
}

(in the template : [scrollObservable]="loadAndScroll" )

Je viens de transposer les solutions affichées ci-dessus en ionique. Rien de plus :)

désolé mais j'ai un problème.
this.contentLoaded.next ();
Ca ne fonctionne pas
Cela ne fonctionne bien que lors du défilement
???

Salut @zarinara ,
Lorsque vous dites not working , obtenez-vous des erreurs?

salut
Aucune erreur ne se produit

@zarinara , pouvez-vous créer un nouveau problème et inclure des exemples de code et le numéro de version de ng-lazyload-image ( npm ls ng-lazyload-image ). Est-il possible pour vous d'utiliser intersectionObserver ?