Refreshing remote Image source without flickering (resp. empty image during refresh)
-
I have a simple Image that uses a remote source (http://url.to/image.png). The problem is, if I change the image source to another url, the Image will be empty while it is fetching the image from the url (looks like a short flickering).
How can I prevent the image from being empty while loading?Can I somehow force the Image to keep the old source while image.status equals to Component.loading?
-
My current way too complicated solution:
@import QtQuick 2.2
Rectangle {
id: container
property int imageVisible: 1
property string initialSource
property int fillmodecolor: "transparent" Image { id: image1 anchors.fill: parent fillMode: fillmode clip: true visible: imageVisible === 1 source: initialSource } Image { id: image2 anchors.fill: parent fillMode: fillmode clip: true visible: imageVisible === 2 } function setSource(source){ var imageNew = imageVisible === 1 ? image2 : image1; var imageOld = imageVisible === 2 ? image2 : image1; imageNew.source = source; function finishImage(){ if(imageNew.status === Component.Ready) { imageNew.statusChanged.disconnect(finishImage); imageVisible = imageVisible === 1 ? 2 : 1; } } if (imageNew.status === Component.Loading){ imageNew.statusChanged.connect(finishImage); } else { finishImage(); } }
}
@
-
@DerMas Did you ever find a better solution for this? I just implemented your idea and it works beautifully, but I was wondering if there was a simpler way...