Ng-lazyload-image: ¿Cómo puedo activar manualmente la carga de imágenes?

Hola @philipgiuliani ,

El problema es que ng-lazyload-image solo comprueba si la imagen está en la ventana gráfica cuando el usuario se desplaza. Mientras no haya un evento de desplazamiento, ng-lazyload-image no hará nada.

Entonces, para resolver su caso de uso, debemos informar a ng-lazyload-image que el mundo que lo rodea ha cambiado. Hay dos formas de hacerlo:

1. Disparando un evento de desplazamiento. Esto engañará a ng-lazyload-image para revalidar si las imágenes están en la ventana gráfica o no. Pero su solución no es bonita (como insinuó).
2. Crear su propia transmisión con eventos de desplazamiento y fusionar con sus 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$" />

¿Ha quedado contestada su pregunta?

Estaba buscando una solución a un problema similar y quiero compartirla, porque sospecho que este problema es donde la gente probablemente lo encontrará.

Problema : cargue las imágenes después de un retraso, incluso si no son visibles dentro del desplazamiento
Solución : en lugar de un desplazamiento fijo, cree un Observable para los valores de desplazamiento y establezca un desplazamiento realmente alto después del tiempo deseado

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

Gracias por su contribución, agregué un enlace a este problema en el archivo Léame.

Cuando desplazo el contenedor rápidamente, la imagen desplazada no se carga. Después de desplazarme, cargo la imagen en la ventana actual. ¿Qué debo hacer? ?

@pangshangggg , lo siento, pero no entiendo. Traté de usar el traductor de Google pero no entendí tu pregunta: / ¿es posible que escribas en inglés?

En Ionic 2/3, las imágenes no se cargan hasta que el usuario comienza a desplazarse. Puedes resolver esto de dos formas:
La forma más fea es así:

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

Y esta es la buena forma:

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

Acabo de transponer las soluciones publicadas anteriormente a ionic. Nada mas :)

En Angular 6 y rxjs 6, estoy tratando de activar manualmente la carga diferida por evento de desplazamiento siguiendo los ejemplos anteriores, pero no funciona. Todas las imágenes se cargan una tras otra sin desplazarse por la página. Este es mi codigo.

Plantilla:

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

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

Seguí este ejemplo del número 224 donde el-Davo dijo que esto soluciona el problema en Angular 5

En Ionic 2/3, las imágenes no se cargan hasta que el usuario comienza a desplazarse. Puedes resolver esto de dos formas:
La forma más fea es así:

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

Y esta es la buena forma:

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

Acabo de transponer las soluciones publicadas anteriormente a ionic. Nada mas :)

lo siento, pero tengo un problema.
this.contentLoaded.next ();
no funciona
Funciona bien solo cuando se desplaza
???

Hola @zarinara ,
Cuando dice not working , ¿obtiene algún error?

Hola
No ocurre ningún error

@zarinara , ¿puedes crear un nuevo problema e incluir algunos ejemplos de código y el número de versión de ng-lazyload-image ( npm ls ng-lazyload-image )? ¿Es posible que use intersectionObserver ?