Images not loading inside of a carousel

[jshrssll]

Hey,

Thanks for developing this awesome module.

I'm running into a small issue where images that are outside of a carousel viewport are not lazy loaded, until the page is scrolled vertically. The carousel (Flickity) is using translate3d for the scrolling so I don't think the scrollTarget will help here.

This is what the component looks like when it's first loaded - The lazy loading is working perfectly. https://s30.postimg.org/fk7qt0nq9/inital.png

However when you move the carousel to show more items, the new items that were once off the canvas have not been lazy loaded https://s30.postimg.org/ww83egh7l/carousel_scrolled.png

If you scroll vertically, after moving the carousel to show more items, the images will lazy load.

Is there a way to load all of these images at once, even if they are horizontally off the canvas?

Cheers!

[jshrssll]

Okay, so I've figured out an interim solution, albeit hacky.

But basically when the carousel has finished sliding, I manually trigger a window scroll event. Not ideal, but works for now.

Let me know if you have any other suggestions...

[tjoskar]

Hi,

The problem is that you do not scroll when you bring new images into the viewport. You are right that scrollTarget will not help you but scrollObservable may solve your problem.

I guess your code looks something like this:

your view:

<div class="controller">
  <p (click)="back()">Back</p>
  <p (click)="forward()">Forward</p>
</div>
<div class="carousel">
  <img *ngFor="let image of carouselImages" [lazyLoad]="image">
</div>

your component:

  back() {
    // show prev images
   window.dispatchEvent(...)
  }

  forward() {
    // show next images
   window.dispatchEvent(...)
  }

Instead, you should be able to use scrollObservable:

your view:

<div class="controller">
  <p (click)="back()">Back</p>
  <p (click)="forward()">Forward</p>
</div>
<div class="carousel">
  <img *ngFor="let image of carouselImages" [lazyLoad]="image" [scrollObservable]="carouselSubject">
</div>

your component:

  carouselSubject = new Subject();

  back() {
    // show prev images
   this.carouselSubject.next();
  }

  forward() {
    // show next images
   this.carouselSubject.next();
  }

You can import Subject from rxjs/Subject: import { Subject } from 'rxjs/Subject';

[hinalshah91]

@tjoskar I am facing the same issue. I tried your solution and it worked when I scroll horizontally. But, then the vertical scroll lazy loading stopped. Can you please suggest some solution?

[tjoskar]

@hinalshah91, we continue at #407

[diegodsp]

@hinalshah91 I'm facing the same problem too, but I resolved using @tjoskar tip. I'm using ngx-hm-carousel and I handled the event of change index, and put the code below. Works fine for me!

<ngx-hm-carousel #carousel [(ngModel)]="currentIndex" (ngModelChange)="onChangeIndex()"...

...
scrollEvent = new Event('scroll'); // model of component
...
onChangeIndex() {
    window.dispatchEvent(this.scrollEvent);
}