Ng-lazyload-image: Como posso acionar manualmente o carregamento de imagens?

Olá @philipgiuliani ,

O problema é que ng-lazyload-image apenas verifica se a imagem está na janela de visualização quando o usuário rola a tela. Enquanto não houver evento de rolagem, ng-lazyload-image não fará nada.

Portanto, para resolver seu caso de uso, precisamos informar ng-lazyload-image que o mundo ao seu redor mudou. Existem duas maneiras de fazer isso:

1. Disparando um evento de rolagem. Isso enganará ng-lazyload-image para revalidar se as imagens estão na janela de visualização ou não. Mas a solução dele não é bonita (como você insinuou).
2. Criar seu próprio fluxo com eventos de rolagem e mesclar com seus eventos personalizados:

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

Isso responde a sua pergunta?

Eu estava procurando uma solução para um problema semelhante e quero compartilhá-la, porque suspeito que é nesse problema que as pessoas provavelmente irão encontrá-lo.

Problema : carregue as imagens após um atraso, mesmo se elas não estiverem visíveis dentro do deslocamento
Solução : em vez de um deslocamento fixo, crie um Observável para valores de deslocamento e defina um deslocamento realmente alto após o tempo desejado

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

Obrigado por sua contribuição, adicionei um link para este problema no arquivo leia-me.

Quando rolar o contêiner rapidamente, a imagem rolada não carrega. Depois de rolar, carrego a imagem na janela de visualização atual. O que devo fazer? ?

@pangshangggg , desculpe, mas eu não entendo. Tentei usar o google tradutor, mas não entendi sua pergunta: / é possível escrever em inglês?

No Ionic 2/3, as imagens não carregam até que o usuário comece a rolar. Você pode resolver isso de duas maneiras:
A maneira mais feia é assim:

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

E este é o bom caminho:

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

Acabei de transpor as soluções postadas acima para iônico. Nada mais :)

No Angular 6 e no rxjs 6, estou tentando acionar manualmente o carregamento lento por evento de rolagem seguindo os exemplos anteriores, mas não está funcionando. Todas as imagens são carregadas uma após a outra sem rolar a página. Este é o meu código.

Modelo:

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

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

Eu segui este exemplo da edição 224, onde el-Davo disse que isso corrige o problema no Angular 5

No Ionic 2/3, as imagens não carregam até que o usuário comece a rolar. Você pode resolver isso de duas maneiras:
A maneira mais feia é assim:

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

E este é o bom caminho:

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

Acabei de transpor as soluções postadas acima para iônico. Nada mais :)

desculpe, mas eu tenho um problema.
this.contentLoaded.next ();
não está funcionando
Funciona bem apenas ao rolar
???

Olá @zarinara ,
Quando você diz not working , você obtém algum erro?

Oi
Nenhum erro ocorre

@zarinara , você pode criar um novo problema e incluir alguns exemplos de código e o número da versão de ng-lazyload-image ( npm ls ng-lazyload-image ). É possível usar intersectionObserver ?