How to display an image placeholder while the real image is loading.(QtQuick/Qml)

chawila

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

ODБOï

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: parent

    width: 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

chawila

Thanks for replying @LeLev

let me try that...

chawila

Thanks it worked! @LeLev

I think i will go with the BusyIndicator for now.

ODБOï

Perfect!

ODБOï

As you said you come from web development industry, this is sure to interest you !
https://qmlweb.github.io/

chawila

yah!..
thats awsome @LeLev
so it is used to develop web applications right!?.

It might help to improve my Qt quick skills,
but i think i`m too comfortable with HTML/Css

ODБOï

Yes, it is an opensource project with lot of bugs for the moment :p