Lazy load will not working base on Ionic ion-grid component

[Coder7777]

There is a bug if I use <img [lazyLoad]="..." /> inside ion-grid, All of pictures will be loaded in the first time.

I have uploaded a demo project to the Github.

https://github.com/Coder7777/ng-lazyload-image-bug

[Coder7777]

<ion-header>
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="5">
        <ion-slides (ionSlidesDidLoad)="onSlideDidLoadHandler()" #slide>
          <ion-slide *ngFor="let image of images">
            <img [defaultImage]="spiner" [errorImage]="error" [lazyLoad]="image"
              [customObservable]="customerObervable$" />
          </ion-slide>
        </ion-slides>
      </ion-col>
      <ion-col size="7">
        <p>ng-lazyload-image have a bug if put it in ion-grid inside, it will load many pictures in first load.</p>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

[Coder7777]

Video

[tjoskar]

Hi @Coder7777,

I see that you are using the ScrollHooks. Have you tried the default IntersectionObserverHooks?

     LazyLoadImageModule
   ],
-  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }],
   declarations: [HomePage]

Or what are your use case to use ScrollHooks?