Ng-lazyload-image: Wie kann ich das Laden von Bildern manuell auslösen?

Hallo @philipgiuliani ,

Das Problem ist, dass ng-lazyload-image nur prüft, ob sich das Bild im Ansichtsfenster befindet, wenn der Benutzer einen Bildlauf durchführt. Solange es kein Scroll-Ereignis gibt, wird ng-lazyload-image nichts tun.

Um Ihren Anwendungsfall zu lösen, müssen wir ng-lazyload-image wissen lassen, dass sich die Welt um ihn herum verändert hat. Dafür gibt es zwei Möglichkeiten:

1. Auslösen eines Scroll-Ereignisses. Dadurch wird ng-lazyload-image ausgetrickst, um erneut zu validieren, ob sich die Bilder im Ansichtsfenster befinden oder nicht. Aber seine Lösung ist nicht schön (wie Sie angedeutet haben).
2. Erstellen Sie Ihren eigenen Stream mit Bildlaufereignissen und führen Sie diese mit Ihren benutzerdefinierten Ereignissen zusammen:

// 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$" />

Hat das deine Frage beantwortet?

Ich habe nach einer Lösung für ein ähnliches Problem gesucht und möchte sie teilen, da ich vermute, dass bei diesem Problem die Leute es wahrscheinlich finden werden.

Problem : Laden Sie Bilder nach einer Verzögerung, auch wenn sie innerhalb des Offsets nicht sichtbar sind
Lösung : Erstellen Sie anstelle eines festen Versatzes ein Observable für Versatzwerte und legen Sie nach der gewünschten Zeit einen wirklich hohen Versatz fest

// 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" />

Vielen Dank für Ihren Beitrag. Ich habe in der Readme-Datei einen Link zu diesem Problem hinzugefügt.

Wenn ich schnell durch den Container scrolle, wird das gescrollte Bild nicht geladen. Nach dem Scrollen lade ich das Bild in das aktuelle Ansichtsfenster. Was soll ich tun? ?

@angshangggg , sorry aber ich verstehe nicht. Ich habe versucht, Google Übersetzer zu verwenden, aber ich habe Ihre Frage nicht verstanden: / Können Sie auf Englisch schreiben?

In Ionic 2/3 werden die Bilder erst geladen, wenn der Benutzer mit dem Scrollen beginnt. Sie können dies auf zwei Arten lösen:
Der hässlichste Weg ist wie folgt:

@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);
   }

Und das ist der gute Weg:

@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" )

Ich habe gerade die oben genannten Lösungen auf ionisch übertragen. Nichts mehr :)

In Angular 6 und rxjs 6 versuche ich, das verzögerte Laden durch Scrollen manuell auszulösen, indem ich den vorherigen Beispielen folge, aber es funktioniert nicht. Alle Bilder werden nacheinander geladen, ohne die Seite zu scrollen. Das ist mein Code.

Vorlage:

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

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

Ich folgte diesem Beispiel aus Ausgabe 224, in der el-Davo sagte, dass dies das Problem in Angular 5 behebt

In Ionic 2/3 werden die Bilder erst geladen, wenn der Benutzer mit dem Scrollen beginnt. Sie können dies auf zwei Arten lösen:
Der hässlichste Weg ist wie folgt:

@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);
   }

Und das ist der gute Weg:

@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" )

Ich habe gerade die oben genannten Lösungen auf ionisch übertragen. Nichts mehr :)

Entschuldigung, aber ich habe ein Problem.
this.contentLoaded.next ();
funktioniert nicht
Es funktioniert nur beim Scrollen einwandfrei
???

Hallo @zarinara ,
Wenn Sie not working sagen, erhalten Sie Fehler?

Hallo
Es treten keine Fehler auf

@zarinara , können Sie ein neues Problem erstellen und einige Codebeispiele sowie die Versionsnummer von ng-lazyload-image ( npm ls ng-lazyload-image ) angeben? Können Sie intersectionObserver ?