Request hit only two image rest it only shows loading icon

[anup5708]

Hi,

I am creating an app in Ionic 2 + angularfire2@4.0.0-rc.0 and integrate this lazy load plugins to show loading icon.

Below are my Code

 <ion-list no-padding>
    <ion-item>
      <ion-slides pager>
        <ion-slide *ngFor="let image of topNewsArray">
          <ion-card>
            <img [defaultImage]="global.loading" [lazyLoad]="image.url" [offset]="offset" />
          </ion-card>
        </ion-slide>
      </ion-slides>
    </ion-item>
  </ion-list>

I found that when my image request is two it show me loading icon as it receive response it display me two images correctly.

But when I have more than two images, it display me two image and the rest still shows me loading icon.

[tjoskar]

@anup5708, are the other images (all images below the first two) outside the viewport?

I guess you are using this slider (I have not been working with Ionic): https://ionicframework.com/docs/api/components/slides/Slides/?
ng-lazyload-image will only listens for scroll events ion-slides will however not emit any scroll events so you have to tell ng-lazyload-image when the world has changed.

Can you try something like this:

// Your controller
imageChange$ = new Subject();

slideChanged() {
  this.imageChange$.next();
}

<ion-list no-padding>
    <ion-item>
      <ion-slides pager (ionSlideDidChange)="slideChanged()">
        <ion-slide *ngFor="let image of topNewsArray">
          <ion-card>
            <img [defaultImage]="global.loading" [lazyLoad]="image.url" [offset]="offset" [scrollObservable]="imageChange$" />
          </ion-card>
        </ion-slide>
      </ion-slides>
    </ion-item>
</ion-list>

[anup5708]

I follow the steps mentioned above now it's working fine as expected, Thanks @tjoskar

[myrsk]

Have a similar issue. However, when i tried to use the same fix. I am getting a runtime error.

_co.slideChanged is not a function

ionic 3.

page.ts - here im getting a debug notice on Subject not found. TS.

imageChange$ = new Subject();

  slideChanged() {
    this.imageChange$.next();
  }

page.html

      <ion-slides *ngIf="(item | async).image1" class="image-slider" loop="true" slidesPerView="2" (ionSlideDidChange)="slideChanged()">
        <ion-slide *ngIf="(item | async).image1">
          <img [defaultImage]="'https://www.placecage.com/1000/1000'" [lazyLoad]="(item | async).image1" class="thumb-img" imageViewer [scrollObservable]="imageChange$" [offset]="'100'">
        </ion-slide>
        <ion-slide *ngIf="(item | async).image2">
            <img [defaultImage]="'https://www.placecage.com/1000/1000'" [lazyLoad]="(item | async).image2" class="thumb-img" imageViewer [scrollObservable]="imageChange$" [offset]="'100'">
          </ion-slide>
          <ion-slide *ngIf="(item | async).image3">
              <img [defaultImage]="'https://www.placecage.com/1000/1000'" [lazyLoad]="(item | async).image3" class="thumb-img" imageViewer [scrollObservable]="imageChange$" [offset]="'100'">
            </ion-slide>
            <ion-slide *ngIf="(item | async).image4">
                <img [defaultImage]="'https://www.placecage.com/1000/1000'" [lazyLoad]="(item | async).image4" class="thumb-img" imageViewer [scrollObservable]="imageChange$" [offset]="'100'">
              </ion-slide>
              <ion-slide *ngIf="(item | async).image5">
                  <img [defaultImage]="'https://www.placecage.com/1000/1000'" [lazyLoad]="(item | async).image5" class="thumb-img" imageViewer [scrollObservable]="imageChange$" [offset]="'100'">
                </ion-slide>
                <ion-slide *ngIf="(item | async).image6">
                    <img [defaultImage]="'https://www.placecage.com/1000/1000'" [lazyLoad]="(item | async).image6" class="thumb-img" imageViewer [scrollObservable]="imageChange$" [offset]="'100'">
                  </ion-slide>
      </ion-slides>
    </ion-card>```

[myrsk]

Additional: Uncaught (in promise): ReferenceError: Subject is not defined ReferenceError: Subject is not defined