Loader "progress" property always showing 1

Vinoth Rajendran4

Hi All,
I was trying to load a large image from internet. I am using Loader to asynchronously load it.

I am using low internet speed connection, and my image takes more than 5 seconds to load in my application, but i could notice progress property is set to 1 at the start of my application itself.

Window {
    width: Screen.desktopAvailableWidth
    height: Screen.desktopAvailableHeight
    visible: true
    title: qsTr("Hello World")

    Component {
        id: imageComponent
        Image {
            id: _image
            source: "https://images.pexels.com/photos/1115090/pexels-photo-1115090.jpeg?cs=srgb&dl=beautiful-flowers-bloom-blossom-1115090.jpg&fm=jpg"
        }
    }

    Loader {
        id: _loader
        anchors.fill: parent
        sourceComponent: imageComponent
        asynchronous: true

        onProgressChanged: {
            print("progress ->",progress)
        }
    }

    Rectangle {
        width: parent.width * _loader.progress
        height: 30
        color:"red"
    }
}

Can someone help me understand why progress is not updating from 0.0 .... 1.0, even if my image takes more than 5 seconds to load in the application, when using low internet speed ?

J.Hilk

@Vinoth-Rajendran4

I think , what you want to track is the progress property of your Image rather than the one of the Loader.

The Image component does the networking stuff, the loader only does the local qml file loading

Vinoth Rajendran4

@J-Hilk : Thanks ! it works now

Updated code:

Window {
    id: root
    width: Screen.desktopAvailableWidth
    height: Screen.desktopAvailableHeight
    visible: true
    title: qsTr("Hello World")

    Component {
        id: imageComponent
        Image {
            source: "https://images.pexels.com/photos/1115090/pexels-photo-1115090.jpeg?cs=srgb&dl=beautiful-flowers-bloom-blossom-1115090.jpg&fm=jpg"
        }
    }

    Loader {
        id: _loader
        anchors.fill: parent
        sourceComponent: imageComponent
        asynchronous: true
    }

    Rectangle {
        width: parent.width * _loader.item.progress
        height: 30
        color:"red"
    }
}