bug: Ion-image inside virtual scroll shows wrong image until new one loaded

Bug Report

Ionic version:

[x] 4.x

Current behavior:

When adding ion-image inside virtual scroll and scrolling it is showing old image for some time until the new image is loaded.

Expected behavior:

Should not show wrong image, instead should be empty image until the image is loaded

Steps to reproduce:

Add virtual scroll and add image inside each item, then scroll trough to see wrong image displayed for short time.

Related code:

https://github.com/jgermanis/virtual-scroll-test

Other information:

Ionic info:

[austinhutchison]

Wanted to +1 this issue. I quickly tried @michael-roewin’s suggestion to use <img> instead of <ion-img> but it didn’t seem to stop the image from the last DOM scroll staying in place until the new image is loaded.

In my mind there are two ways to address this

1. It seems the virtual DOM elements are updated on scroll. If instead there were added and removed dynamically I think that would resolve the problem. Maybe this design is is a choice based on performance.
2. If we must reuse the same DOM elements and update them with new data on scroll - then we should get some event where we can listen for when the item is out of view, then hide the image / replace with a skeleton placeholder etc.

It’s not acceptable for me personally to have the images flash to the new image on load.

I’m pretty sure I will have to abandon virtual scroll and do some type of pagination.

[elvisgraho]

To Fix this permanently:

1. Use this: https://github.com/rintoj/ngx-virtual-scroller

2. Do this in page where there is ion-content:

  @ViewChild(IonContent, {static: false}) ionContent: IonContent;

  ngAfterViewInit() {
    this.ionContent.getScrollElement().then(scrollElement => {
      this.importantElement = scrollElement;
    });
  }

Now, you can use importantElement right away or store it in the service in case you need it in routes where there is no ion-content.

1. Replace ion-virtual-scroll with the npm-plugin above.

    <virtual-scroller [parentScroll]='importantElement' #scroll [items]="helloItems">
      <div *ngFor="let item of scroll.viewPortItems">{{item}}</div>
    </virtual-scroller>

Bob IS your uncle.