Ng-lazyload-image: Bagaimana saya bisa memicu pemuatan gambar secara manual?

Hai @philipgiuliani ,

Masalahnya adalah bahwa ng-lazyload-image hanya memeriksa apakah gambar ada di viewport saat pengguna menggulir. Selama tidak ada acara gulir, ng-lazyload-image tidak akan melakukan apa pun.

Jadi untuk menyelesaikan kasus penggunaan Anda, kami perlu memberi tahu ng-lazyload-image bahwa dunia di sekitarnya telah berubah. Ada dua cara untuk melakukannya:

1. Mengaktifkan acara gulir. Ini akan mengelabui ng-lazyload-image untuk memvalidasi ulang apakah gambar ada di viewport atau tidak. Tapi solusinya tidak bagus (seperti yang Anda isyaratkan).
2. Membuat aliran Anda sendiri dengan acara gulir dan bergabung dengan acara khusus Anda:

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

Apakah ini menjawab pertanyaanmu?

Saya sedang mencari solusi untuk masalah serupa, dan ingin membagikannya, karena saya menduga masalah ini adalah tempat orang mungkin akan menemukannya.

Masalah : memuat gambar setelah penundaan, meskipun gambar tidak terlihat dalam offset
Solusi : alih-alih offset tetap, buat Observable untuk nilai offset, dan tetapkan offset yang sangat tinggi setelah waktu yang diinginkan

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

Terima kasih atas kontribusi Anda, saya menambahkan tautan ke masalah ini di file readme.

Saat saya menggulir penampung dengan cepat, gambar yang digulir tidak dimuat. Setelah menggulir, saya memuat gambar di viewport saat ini. Apa yang harus saya lakukan? ?

@pangshangggg , maaf tapi saya tidak mengerti. Saya mencoba menggunakan google translate tetapi saya tidak mengerti pertanyaan Anda: / mungkinkah Anda menulis dalam bahasa Inggris?

Di Ionic 2/3, gambar tidak dimuat sampai pengguna mulai menggulir. Anda dapat menyelesaikannya dengan dua cara:
Cara paling jelek adalah seperti ini:

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

Dan inilah cara yang baik:

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

Saya baru saja mengubah solusi yang diposting di atas menjadi ionik. Tidak ada lagi :)

Di Angular 6 dan rxjs 6, saya mencoba memicu secara manual peristiwa lazy load dengan menggulir dengan mengikuti contoh sebelumnya tetapi tidak berfungsi. Semua gambar dimuat satu demi satu tanpa menggulir halaman. Ini kode saya.

Template:

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

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

Saya mengikuti contoh ini dari masalah 224 di mana el-Davo mengatakan bahwa ini memperbaiki masalah di Angular 5

Di Ionic 2/3, gambar tidak dimuat sampai pengguna mulai menggulir. Anda dapat menyelesaikannya dengan dua cara:
Cara paling jelek adalah seperti ini:

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

Dan inilah cara yang baik:

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

Saya baru saja mengubah solusi yang diposting di atas menjadi ionik. Tidak ada lagi :)

maaf tapi saya punya masalah
this.contentLoaded.next ();
tidak bekerja
Ini berfungsi dengan baik hanya saat menggulir
???

Hai @arinara ,
Saat Anda mengatakan not working , apakah ada kesalahan?

Hai
Tidak ada kesalahan yang terjadi

@zarinara , dapatkah Anda membuat terbitan baru dan menyertakan beberapa contoh kode dan nomor versi ng-lazyload-image ( npm ls ng-lazyload-image ). Apakah mungkin bagi Anda untuk menggunakan intersectionObserver ?