Ionic-framework: ION-IMG in VIRTUAL-SCROLL doesn't load

[JustasKuizinas]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When I scroll down the vitual-scroll and stop scrolling some ion-img doesn't load when they are in the viewport.

Expected behavior:
All ion-img should load when not scrolling and ion-img is in viewport.

Steps to reproduce:
Link to plnkr: http://plnkr.co/edit/rkuCXg

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):
Cordova CLI: 6.4.0
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.4.0
Xcode version: Not installed

[jgw96]

Hello, thanks for using Ionic! What browser or device are you seeing this issue on?

[AlQuraian]

I second this, I have faced the same issue. I had to use the regular img element instead of ion-img.
I'am using latest Chrome on Android 7.1.1.

[JustasKuizinas]

I am testing in desktop chrome browser 56.0.2924.76 (64-bit). I cant use regular img, because on mobile device ux will be very poor. I think this bug appeared with latest ionic 2.0.0 release, before that everything was working like a charm.

[jgw96]

Thanks everyone for the info! I can now reproduce this with chrome 56 on desktop and on chrome 56 on my Nexus 6 running Android 7.1.1.

[pavimus]

this bug was introduced in RC4, #9660

[JustasKuizinas]

@pavimus Any workaround?

[pavimus]

@justas-kuizinas Not for now, still waiting solution from developers...

[JustasKuizinas]

@pavimus yes me too, I think it should be top priority, cuz virtual-scroll is most used component

[pavimus]

2.0.1 is out, and still no fix to this issue according to changelog :-(

[JustasKuizinas]

At the moment there are a lot of problems with virtual scroll, maybe anyone can suggest alternative?

[pavimus]

Problem still exists in 2.1.0 http://plnkr.co/edit/2vd80yTkbG6dKw2UpOtk

[orlyapps]

We have the same problem. Any alternative?

[KevinRamos1992]

The same problem, is there wet any solution to this?

[pavimus]

As i understood, problem is binded with #10451 which is sheduled to be fixed in 2.4.0 (it was in 2.3.0 milestone, but moved to 2.4.0). So we can hope that 2.4.0 will be released at 5th April with this fix...

[JustasKuizinas]

Yes I also think that #10451 will solve this problem.

[jgw96]

Hello all, thanks for using Ionic! I am going to close this issue as a duplicate of #10451.

[sherozejoomun]

Having same problem with 2.0.0, any updates on how to fix that?

[Catscratch]

Hi. Sorry, but it is still not solved. I'm using Ionic 3.8.1 and facing the same issue. Ion-img randomly stay empty when scrolling some time and little bit faster.

[amsterdam80]

Any fix about this one I'm using the latest version and still is there

[Catscratch]

Yeah. We found a solution. Simply don't use ionic virtual scroll.

We replaced ionic one by angular 2 virtual scroll and it is fast like hell. ;-)

See here: http://rintoj.github.io/angular2-virtual-scroll/

With this virtual scroll there is also no need to use ion-img because the performance is really fast with default img.

[rcfrias]

With this virtual scroll there is also no need to use ion-img because the performance is really fast with default img.

Is this also re-using cells? Are all images loaded at once, even the ones not shown? It would be nice to know some more details about this alternative way of using the list. Any insights you got sofar @Catscratch ? I am also planning to use small thumb images, but it could be a list of 500 - 2000 items that are retrieved in one call.

[Catscratch]

Yes. It's reusing cells. See the website. There is an animated gif as example. You only have as much items in your DOM tree as really fit on the screen. The difference to ionic is, that the items are not deleted and new one are created. You always have the same items. Only its content is changed. Also the images. These are loaded on view. So if you see e.g. 8 items. Only 8 images are loaded. We have lists with about 10000 items with thumbnail images without any problems.

[rcfrias]

Ok, I checked the library and made it work with some tweaks ( I had to calculate the component's height). It does load the images that are currently on sight, and it tries as much as possible to catch what already has been loaded. Nevertheless, this is handled dynamically by the browser and it decides when to free up memory, so, after loading a bunch of images, it will re-load the images at the beginning of the list if you scroll back up again. The only thing I will miss for now is the group headers and all the good stuff ionic has to offer in lists. ( Sort, Grouping, Headers, Dividers). I would be awesome that all this could work with the ionic framework out of the box. Thankx anyways for the insights @Catscratch

[Catscratch]

You only have to set the [childHeight]="??" attribute. The addon calculates the number of items by itself. :-)

We made our own header by a position fixed div on top of the virtual scroll table.

[rcfrias]

I am using a search field, that I want to display at all times, so I have to place it outside the virtual scroll list, and that messes its height.

I haven't use that [childHeight] attribute, but afaik it is only if you have items with different heights. I will give it a try anyways.

We made our own header by a position fixed div on top of the virtual scroll table.

that sounds like one sticky header that wont move at all. And what about having more than one group in sight?, that would display the topmost header for the first group and include the second one?

I think the project's owner suggested to include the header data into the data source array and then change the style or something. Although that wouldn't be sticky either...

[Catscratch]

Since your problem is very specific, I think you won't find a default control to match your requirements. But at least you're using HTML5. So you can do whatever you want. ;-)

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.