Ng-lazyload-image: A imagem de carregamento lento não funciona com pré-inicialização

Olá @ lares83 ,

Obrigado por me avisar. Esse é um problema bastante complicado, pois não há como saber quando a imagem se torna visível.

Uma correção rápida é definir offset=1 como você sugere, mas isso fará com que todas as imagens sejam carregadas quando se tornarem visíveis, mesmo que não estejam na janela de visualização. Isso ocorre porque ng-lazyload-image não tem como saber onde a imagem está antes que ela se torne visível e então será tarde demais (não teremos um novo evento até que o usuário role).

Uma maneira de corrigir isso é ouvir o evento PrebootComplete :

constructor() {
  this.scrollAndPrebootComplete$ = Observable.merge(
    Observable.fromEvent(window, 'scroll'),
    Observable.fromEvent(window, 'PrebootComplete')
  );
}

E então no modelo:

<img [lazyLoad]="lazyLoadImage" [scrollObservable]="scrollAndPrebootComplete$" />

Você pode facilmente criar um componente personalizado que envolva lazyLoad e passe adiante scrollAndPrebootComplete$ .

Outra solução é usar IntersectionObserver mas isso requer # 304 para ser resolvido.

Uma solução rápida é definir o atributo de deslocamento, por exemplo, 1, o que torna o retorno intersectsWith verdadeiro.

Na verdade, isso é um bug, não deveria estar acontecendo. Vou abrir uma edição separada para isso.

Estou fechando isso. Informe se a solução proposta acima não funcionou.