Display image only when it's completely decoded not working

I’m running a Raspberry Pi 3 in Chromium for a custom Spotify interface which displays the current song that’s played. While that works in itself, the transition between one song to another is extremely choppy and I just don’t know what to do anymore. What’s supposed to happen is that the image and background do not fade-in until the image is completely loaded, as in, it should not be cut in half.

But as you can see here, that is not the case (it’s only for a few frames, but you can clearly see how it first only shows a fifth of the cover art and then jumps to the full image): https://i.imgur.com/pQsQ26r.mp4

For reference, this is what is should look like: https://i.imgur.com/QWY1J38.gif

On a regular PC this is already super smooth, but I assume the RP3 is just too slow to get it all decoded in time. So, naturally, I thought my problem would be solved like this, but the results are still what you can see in the first video:

function changeImage(newImage) {
    var preloadImg = new Image();
    preloadImg.src = newImage;
    preloadImg.decode().then(() => {
        let artworkUrl = makeUrl(preloadImg.src);
        document.getElementById("artwork-img").style.backgroundImage = artworkUrl;
        document.getElementById("background-img").style.backgroundImage = artworkUrl;
        setArtworkOpacity("1");
    });
    setArtworkOpacity("0");
}

function setArtworkOpacity(value) {
    // the smooth fade itself is done via CSS "transition: opacity 1s;"
    document.getElementById("artwork-img").style.opacity = value;
    document.getElementById("background-img").style.opacity = value;
}

I’ve also tried img.onload, same result.

Is this the wrong approach? Ideally there would be a function that goes "do not execute until image has been fully painted" in which case I’d move the setArtworkOpacity("1") into its callback, but I couldn’t find anything like that.

53 thoughts on “Display image only when it's completely decoded not working”

  1. 680714 75846An intriguing discussion is going to be worth comment. Im confident that you want to write far more about this topic, it may not be a taboo subject but usually consumers are too few to chat on such topics. To yet another. Cheers 685168

    Reply