Ng-lazyload-image: memuat gambar yang muncul di viewport

Itu terdengar aneh. Versi ng-lazyload-image yang Anda gunakan? Peramban apa yang Anda gunakan? Apakah ini perilaku yang sama di browser lain (firefox/chrome/safari/edige/ios/android)? Apakah Anda yakin gambar tidak dimuat sampai Anda mulai menggulir?
Apakah mungkin membuat repo kecil untuk mereproduksi kesalahan? Atau merekam gif/video?

Saya memiliki masalah yang sama di Chrome, Firefox dan Edge. Saya menggunakan [tersembunyi] (benar secara default) pada komponen yang memiliki gambar yang dimuat dengan lambat.
Saat disembunyikan berubah menjadi false, Komponen sedang merender tetapi gambar adalah default (pemuat), hanya gulir yang membuat gambar muncul.

Tag img saya di komponen:

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

Dan komponen saya:

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

Hai @zieka ,

Masalahnya adalah bahwa gambar disembunyikan ketika ng-lazyload-image masuk dan karenanya akan mengancam gambar seperti di luar viewport (gambar tidak memiliki posisi, karena tidak dirender dan tidak ada cara untuk mengetahui kapan itu menjadi terlihat, dan validasi ulang jika ada di viewport).

Namun ada tiga cara untuk memecahkan ini.

1. Menggunakan IntersectionObserver (cara yang disarankan)
   Cukup tambahkan intersectionObserverPreset di modul Anda:

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

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

1. Gunakan terlihat bukan tersembunyi. Jika gambar masih memiliki posisinya jika tidak terlihat.
2. Buat scrollObservable yang menggabungkan acara gulir dan acara yang mengubah activeRecipeIndex (dalam kasus Anda). Saya dapat membantu Anda dengan ini jika Anda mau.

halo, @tjoskar saya memecahkan masalah ini dengan menggunakan [offset]=800 , tetapi saya tidak yakin apakah itu cara yang paling tepat untuk memperbaikinya, bagaimana menurut Anda?

Terima kasih @tjoskar berhasil :) Saya memilih opsi pertama :)