How to stop loading single image mutltiple times on a screen

[sierdzio]

@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).

[RG90]

This post is deleted!

[RG90]

@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

[RG90]

@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

[sierdzio]

@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?

[RG90]

@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?.

[sierdzio]

@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 { ... }
  }
}

[RG90]

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

[sierdzio]

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

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

[RG90]

@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

[sierdzio]

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

flickableDirection: Flickable.flickHorizontally

[RG90]

@sierdzio
Yes, It worked for me.

[sierdzio]

Great! Happy coding :-)