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.

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.