How to display an image placeholder while the real image is loading.(QtQuick/Qml)
-
I`m trying to load images from the server into my QtQuick/Qml app.
By default the App download the image internally and leave the image container blank for some minutes which is not good.So what i want is to display an image placeholder while the real image is loading, then i replace the placeholder with the real image when it finishes.
(Just like it is done in Twitter app and others)Or even display the image while it is loading.
( like it is done by web browsers)
I am sorry if i am not making any point, i come from web development industry
-
Hi !
Simply use 'Loader' for that ! (http://doc.qt.io/qt-5/qml-qtquick-loader.html)
You can use 'BusyIndicator' for providing feedback to users during the loading. (http://doc.qt.io/qt-5/qml-qtquick-controls-busyindicator.html)
Exemple:
Loader{
anchors.fill: parent
id:pageLoader
source: "finalImage.svg"
asynchronous: true
visible: status == Loader.Ready}
BusyIndicator {
id: busyAnimation
anchors.centerIn: parentwidth: 100 height: width running: pageLoader.status === Loader.Loading Image{ source: "imageDuringLoading.svg" height: parent.height*0.5 width: height anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter } }
LA
-
Thanks it worked! @LeLev
I think i will go with the BusyIndicator for now.
-
As you said you come from web development industry, this is sure to interest you !
https://qmlweb.github.io/