How to stop loading single image mutltiple times on a screen



  • Hi,

    I am trying to load an image on a screen, but it is been loading multiple times depending upon the number of buttons on scree. Can anyone help me how to stop loading multiple images of same type and just allow to load one image

    Thanks


  • Moderators

    Please provide some code sample, it's hard to know what you mean just from this description.



  • Here is some code

            Loader {
                focus: true
                anchors{
                               ---------------------------
                }
                asynchronous: true
    
                Binding {
                    target: loader.item
                    property: "focus"
                    value: container.activeFocus
                }
    
                Image {
                    id: img
                    objectName: "img"
    
                    asynchronous: true
    
                    source: (*.png")
    
                    fillMode: Image.PreserveAspectFit
                    anchors{
                        horizontalCenter: parent.horizontalCenter
                        verticalCenter: parent.verticalCenter
                    }
                }
            }
    

    Here I am using an Image inside a loader. the loader is trying to load image as manay has the buttons on the screen. I just want to load only one image on the screen. how can I do it



  • @sierdzio

    Here is some code

        Loader {
            focus: true
            anchors{
                           ---------------------------
            }
            asynchronous: true
    
            Binding {
                target: loader.item
                property: "focus"
                value: container.activeFocus
            }
    
            Image {
                id: img
                objectName: "img"
    
                asynchronous: true
    
                source: (*.png")
    
                fillMode: Image.PreserveAspectFit
                anchors{
                    horizontalCenter: parent.horizontalCenter
                    verticalCenter: parent.verticalCenter
                }
            }
        }
    

    Here I am using an Image inside a loader. the loader is trying to load image as manay has the buttons on the screen. I just want to load only one image on the screen. how can I do it


  • Moderators

    Nothing in this snippet suggests how buttons are connected to the Image component. Actually, no buttons are shown in the snippet at all.

    Is source or sourceComponent set anywhere for the Loader? I don't see it. It is a big unusual to position a non-loaded component (in your case, Image) inside a Loader.

    source: (*.png") what's that about? Does not look like valid code.

    I'm sorry but this code is not enough to determine your problem. We need to know how you instantiate your buttons, and what is the connection between the image and buttons.



  • This post is deleted!

  • Moderators

    @RG90 said in How to stop loading single image mutltiple times on a screen:

    source: R_URL
    sourceComponent: dividerSix

    You are setting your Image (dividerSix) in each delegate. So, each time that new delegate is instantiated, a new Image will be loaded.

    By the way, you should not set source and sourceComponent at the same time. Pick either one (you probably only need R_URL in your case).



  • This post is deleted!


  • @sierdzio
    ok, I would like to make even dividerSix as a dynamic as of buttons. how could I go it. Is their is a possibility of making both the components move dynamically. Can you help me on this.

    Thanks



  • @sierdzio

    @sierdzio

    GridView
    {
    signal buttonAction(int index, int action)

    property int itemWidth: 195
    property int itemHeight: 80

    id: view
    objectName: "view"

    focus: true

    anchors.fill: parent

    cellHeight: view.height / 2
    cellWidth: view.width / 3
    flow: GridView.FlowTopToBottom

    Component{

    id: dividerSix

    Image {
        id: img
        objectName: "img"
    
        asynchronous: true
    
        source: (T.skin + "/menu/divider_six.png")
    
        fillMode: Image.PreserveAspectFit
        anchors{
            horizontalCenter: parent.horizontalCenter
            verticalCenter: parent.verticalCenter
        }
    }
    

    }

    delegate:Component {

    FocusScope {
        id: container
    
        property bool current: GridView.isCurrentItem
    
        width: view.cellWidth
        height: view.cellHeight
    
        Loader {
            id: loader
    
            focus: true
    
            width: itemWidth
            height: itemHeight
    
            anchors{
                horizontalCenter: parent.horizontalCenter
                verticalCenter: parent.verticalCenter
            }
    
            asynchronous: true
    
            source: R_URL
            sourceComponent: dividerSix
    
            Binding {
                target: loader.item
                property: "focus"
                value: container.activeFocus
            }
    
            Connections {
                target: loader.item
                onButtonAction: {
                    switch (action) {
                    case ButtonActions.PRESSED:
                        view.highlightMoveDuration = 0;
                        container.GridView.view.currentIndex = index;
                        loader.item.forceActiveFocus();
                        view.highlightMoveDuration = -1;
                        break;
                     }
                }
            }
        }
    }
    

    }
    }

    Here is my whole code. When I am adding sourceComponent to loader it is loading the img multiple times depending on buttons. How Can I stop it by loading it and just load only one image


  • Moderators

    @RG90 said in How to stop loading single image mutltiple times on a screen:

    ok, I would like to make even dividerSix as a dynamic as of buttons. how could I go it. Is their is a possibility of making both the components move dynamically

    Sorry but I don't understand what you mean at all.

    What do you want to achieve, exactly? A button with an image inside it? How should it look like? Then such simple construct should work:

    GridView {
    
      Repeater {
        // put here how many items should be generated
        Button {
          text: "something " + index
    
          Image {
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
             anchors.rightMargin: 5
             source: "my image source"
         }
        }
      }
    }
    

    But I'm shooting blind here. I don't know what you are trying to achieve, and why you use Loaders so much. Are components loaded from the Internet?



  • @sierdzio

    I want to make button to be dragged along with Image. I just want it has one component so that when a user tries to drag a button, even Image also get dragged by delegate behavior. Can we use two components in one delegate so that we can get this behavior?.


  • Moderators

    @RG90 said in How to stop loading single image mutltiple times on a screen:

    @sierdzio

    I want to make button to be dragged along with Image. I just want it has one component so that when a user tries to drag a button, even Image also get dragged by delegate behavior. Can we use two components in one delegate so that we can get this behavior?.

    Yes, of course. QML supports nesting, and that is what I already provided you in my previous comment.

    A different solution (with dragging. Pseudo code, I have no time to test it), maybe it will suit you better:

    Item {
      width: 100
      height: 100
    
      Drag.active: true
    
      RowLayout {
        anchors.fill: parent
        Button { ... }
        Image { ... }
      }
    }
    


  • Thanks @sierdzio for your suggestion. my issue has been solved. I just used GridView inside a Flickable, which made much easier to me.


  • Moderators

    OK, so you wanted a scrollable/ flickable control, not to drag items around.

    Fine, I'm happy you've got it to work :-)



  • @sierdzio
    I have one more question, how can I stop flickable/scrollable vertically. I just need it be scrollable only on X-axis(horizontally). How can I use flickableHorizontally propertty


  • Moderators

    Can't check the docs now, but it was something like:

    flickableDirection: Flickable.flickHorizontally
    


  • @sierdzio
    Yes, It worked for me.


  • Moderators

    Great! Happy coding :-)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.