Ng-lazyload-image: carregar imagens que aparecem na janela de visualização

Isso soa estranho. Qual versão de ng-lazyload-image você está usando? Qual navegador você está usando? Este é o mesmo comportamento em outros navegadores (firefox / chrome / safari / edige / ios / android)? Tem certeza de que a imagem não é carregada até você começar a rolar?
É possível criar um pequeno repo para reproduzir o erro? Ou gravar um GIF / vídeo?

Tenho o mesmo problema no Chrome, Firefox e Edge. Estou usando [oculto] (verdadeiro por padrão) em componentes que possuem imagens carregadas lentamente.
Quando oculto mudando para falso, o componente está renderizando, mas a imagem é o padrão (carregador), apenas a rolagem faz com que as imagens apareçam.

Minha tag img no componente:

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

E meu componente:

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

Olá @zieka ,

O problema é que a imagem está oculta quando ng-lazyload-image entra em ação e, portanto, ameaçará a imagem como fora da janela de visualização (a imagem não tem posição, senão ela não foi renderizada e não há como saber quando ela se tornará visível, e revalidar se estiver na janela de visualização).

No entanto, existem três maneiras de resolver isso.

1. Usando IntersectionObserver (forma recomendada)
   Basta adicionar intersectionObserverPreset em seu módulo:

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

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

1. Use visível em vez de oculto. Se a imagem ainda tem sua posição, se ela não estiver visível.
2. Crie seus próprios scrollObservable que mesclam eventos de rolagem e o evento que altera activeRecipeIndex (no seu caso). Eu posso te ajudar com isso se você quiser.

Olá, @tjoskar eu meio que resolvi esse problema usando [offset]=800 , mas não tenho certeza se é a maneira mais adequada de consertar, o que você acha?

Obrigado @tjoskar , funciona :) Eu escolho a primeira opção :)