Collection-repeat image recycling while loading issue


#1

I’m displaying a lot of images in my collection-repeat lists. I’ve noticed that while scrolling, if the image to be displayed has not yet downloaded, the user will be shown the last image that existed in that recylcled node’s “spot” until the new one loads.

It’s misleading behavior and can be a bit confusing for the user. More preferable would be for later items to somehow be reset to initial conditions so the user sees an empty container while the image loads.

I’ve set up this codepen which reproduces the problem:

You’ll have to throttle your internet connection somehow to consistently see the issue in action. Either on a mobile device without wifi or with SpeedLimit.prefPane. Scroll down quickly and you’ll see that the images from up-top are repeated for some time until the new images load on top of them.

I hope this was clear. Any solutions? Thanks!


#2

I opened a github issue for this: