Refreshing remote Image source without flickering (resp. empty image during refresh)



  • I have a simple Image that uses a remote source (http://url.to/image.png). The problem is, if I change the image source to another url, the Image will be empty while it is fetching the image from the url (looks like a short flickering).
    How can I prevent the image from being empty while loading?

    Can I somehow force the Image to keep the old source while image.status equals to Component.loading?



  • My current way too complicated solution:

    @import QtQuick 2.2

    Rectangle {
    id: container
    property int imageVisible: 1
    property string initialSource
    property int fillmode

    color: "transparent"
    
    Image {
        id: image1
        anchors.fill: parent
        fillMode: fillmode
        clip: true
        visible: imageVisible === 1
        source: initialSource
    }
    
    Image {
        id: image2
        anchors.fill: parent
        fillMode: fillmode
        clip: true
        visible: imageVisible === 2
    }
    
    function setSource(source){
        var imageNew = imageVisible === 1 ? image2 : image1;
        var imageOld = imageVisible === 2 ? image2 : image1;
    
        imageNew.source = source;
    
        function finishImage(){
            if(imageNew.status === Component.Ready) {
                imageNew.statusChanged.disconnect(finishImage);
                imageVisible = imageVisible === 1 ? 2 : 1;
            }
        }
    
        if (imageNew.status === Component.Loading){
            imageNew.statusChanged.connect(finishImage);
        }
        else {
            finishImage();
        }
    }
    

    }

    @


Log in to reply
 

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