Ng-lazyload-image: cargar imágenes que aparecen en la ventana gráfica

Eso suena raro. ¿Qué versión de ng-lazyload-image estás usando? ¿Qué navegador estás usando? ¿Es este el mismo comportamiento en otros navegadores (firefox / chrome / safari / edige / ios / android)? ¿Estás seguro de que la imagen no se carga hasta que comienzas a desplazarte?
¿Es posible crear un pequeño repositorio para reproducir el error? ¿O grabar un gif / video?

Tengo el mismo problema en Chrome, Firefox y Edge. Estoy usando [oculto] (verdadero por defecto) en un componente que tiene imágenes cargadas de forma diferida.
Cuando se oculta cambiando a falso, el componente se está renderizando pero la imagen es la predeterminada (cargador), solo el desplazamiento hace que las imágenes aparezcan.

Mi etiqueta img en el componente:

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

Y mi componente:

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

Hola @zieka ,

El problema es que la imagen está oculta cuando ng-lazyload-image entra en acción y, por lo tanto, amenazará a la imagen como fuera de la ventana gráfica (la imagen no tiene posición, no está renderizada y no hay forma de saber cuándo se vuelve visible, y revalidar si está en la ventana gráfica).

Sin embargo, hay tres formas de solucionar este problema.

1. Usando IntersectionObserver (forma recomendada)
   Simplemente agregue intersectionObserverPreset en su módulo:

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

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

1. Use visible en lugar de oculto. Si la imagen aún tiene su posición si no es visible.
2. Cree sus propios scrollObservable que fusionen eventos de desplazamiento y el evento que cambia activeRecipeIndex (en su caso). Puedo ayudarte con esto si quieres.

hola, @tjoskar , resolví este problema usando [offset]=800 , pero no estoy seguro de si es la forma más adecuada de solucionarlo, ¿qué te parece?

Gracias @tjoskar funciona :) Elijo la primera opción :)