Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to preload the child.qml files while loading the main.qml file



  • Hai All,

    I have child.qml file with TableView. On clicking a button from the main.qml file it loads the child.qml file
    There is delay in loading the child.qml Page due to the TableView component. And I am running this application in a embedded board.

    How to preload the Child.qml file while loading the main.qml file. But make it visible only on clicking the button. ?
    Or Is it possible to load the child.qml to the cache ? , so when I click the button for the second time it loads the qml file faster

    main.qml

     msa_chager.onClicked: {
            console.log("clicked")
            StackView.view.push("child.qml")
        } 
    

    child.qml

    Page {
        StackLayout {
            width: parent.width
            height: parent.height-tabBar.height
            currentIndex: tabBar.currentIndex
    
            LiveView{}
            
    } 
    

    LiveView.qml

    Item {
        id: item1
        property alias btn_ClearFaults: btn_ClearFaults
    
        TableView {
            anchors.fill: parent
            anchors.rightMargin: 20
            anchors.leftMargin: 25
            anchors.bottomMargin: 66
            anchors.topMargin: 20
            TableViewColumn {
                role: "ID"
                title: "ID"
                width: 100
            }
            TableViewColumn {
                role: "Description"
                title: "Description"
                width: 675
            }
    
            model: liveView
        }
    }
    

  • Moderators

    Something along these lines?

    Main.qml

    RootQMLItem {
        id: rootItem
        property var childComponent;
    
        msa_chager.onClicked: {
            if (childComponent.status != Component.Ready)  {
                return // still loading
            }
            var item = childComponent.createObject(rootItem)
            ​StackView.view.push(item)
        ​}
    
        Component.onCompleted {
            childComponent = Qt.createComponent("child.qml", Component.Asynchronous, rootItem);
        }
    }
    

    ... or you could use a Loader instead.



  • @kshegunov

    The creation of object is happening at the below line, which is again causing the delay in loading the UI.

     var item = childComponent.createObject(rootItem)
    

    Is it possible to create the instance of the child.qml in Component.onCompleted function , but make it visible only after clicking the mouse. so the UI loads faster


  • Moderators

    @James-A said in How to preload the child.qml files while loading the main.qml file:

    The creation of object is happening at the below line, which is again causing the delay in loading the UI.

    If the object creation is the heavy thing, then you could incubate the object (offload the instantiation) - see here:
    https://doc.qt.io/qt-5/qml-qtqml-component.html#incubateObject-method

    Is it possible to create the instance of the child.qml in Component.onCompleted function , but make it visible only after clicking the mouse. so the UI loads faster.

    Yes, it is. You just put the creation code there instead of the click handler. However do keep an instance to the component so you can check if it's been loaded/completed. Btw, doesn't Loader work for your case?


  • Moderators

    @James-A like @kshegunov said, Loader is the way to go, make sure to set the asynchronous property to true


Log in to reply