QML Animated Image collapses when scrolling away from it, and reappear when reaching it

vudangkhoa2906

I have a ListView in my application whose model is a list of urls to gifs, and delegate is a Rectangle containing an AnimatedImage whose source is the modelData. the orientation of the ListView is horizontal. Now, whenever i scroll out of a gif, it start to collapse (aka, height = 0) and when I scroll back to it, it start expanding to its normal height. How could I stop this behavior? I don't want my images to keep collapsing and then expanding repeatedly. It creates a rather bad user experience.

Shrinidhi Upadhyaya

Hi @vudangkhoa2906 , can you share the code?

vudangkhoa2906

hi @Shrinidhi-Upadhyaya
The code is pretty long? How can I share it up here?
Anyway, I think I have figured out the problems. When I scroll out of an image, for some reason, the image starts to unload, and then when I scroll to it, it starts to reload (I log out the image status whenever it changes as described in https://doc.qt.io/qt-5/qml-qtquick-image.html#status-prop)
Is there a way to stop images from unloading/reloading like this?

Pradeep P N

Hi @vudangkhoa2906 you are loading the .gif image to the source from Online or you have the local copy of it ?

I did write a test sample code where the .gif was loaded properly in the View.
I have the .gif file in the Qt Resource file.

Below is the output:

J.Hilk

@vudangkhoa2906

you can try to activating
https://doc.qt.io/qt-5/qml-qtquick-listview.html#delayRemove-attached-prop

It might help. But you should show your qml code.

vudangkhoa2906

hi @Pradeep-P-N in my app, I load the gifs from online source (giphy)
for more information, it's a mobile app. I will check if the same problem happens with desktop app

vudangkhoa2906

hi @J.Hilk
thank you for your suggestion. I will try it.
Here is the code of the delegate item:

delegate: Column{
id:delegateMessage
width: parent.width
opacity: 1
scale: 1

        Rectangle{
            height: gifMessageAnimatedImage.implicitHeight + 20
            width: 200
            x:10 
            radius: 6

            AnimatedImage {
                id: gifMessageAnimatedImage
                x:10 
                y:10 
                width: 200
                source: gifUrl

                onStatusChanged: {
                    console.log("DEBUG_onStatusChanged:", status)
                }
            }
    }

}

J.Hilk

@vudangkhoa2906
The problem is most likely that your source is a internet link.

The not displayed views get destroyed and recreated later on and each time they have to download the gif, before its displayed.

I would suggest, on completion of your QML file, download the gifs to QStandardPaths::TempLocation and use that now local file for your delegate.

vudangkhoa2906

@J.Hilk
you're right. I just tried replacing the gifUrl with a local url and they don't collapse.
Could you please explain your solution clearer? Like how do I download those files? And with each item in the model, how could it know which is the right gif from those downloaded to pass to the delegate ? And when I move to another page, could I remove those files downloaded previously?

Pradeep P N

Hi @vudangkhoa2906
Can you please tell why are you using the online URL ?
Is there any major reason or purpose for Online resource and why cant you download them and use the local copy in the code ?

Just have a look in to the The Qt Resource System

vudangkhoa2906

hi @Pradeep-P-N
it's a chatting app. the server only store the url of the images. when a user get the url of the gif, they should load the gif from online source. I don't think it would be a good idea to store gifs locally.

Pradeep P N

Hi @vudangkhoa2906
Could you please try the same using Repeater QML Type instead of ListView.

vudangkhoa2906

hi @Pradeep-P-N
I'll try as you suggested. However, I would still prefer ListView, since it support more functionalities that Repeater does.
And I also found a work-around with my problem. I add a placeholder ( a loading activity indicator) and set its visibility to true if the AnimatedImage is loading. That way the whole view does not get collapsed every time the image unload