Changing image src onReady() —visible jump from old picture to the new

Discussion Ask a question
,
1

I have the code that changes a couple of images on the website semi-randomly with every visit. It runs in the page’s onReady() function and works sort of okay. The main problem is that on page refresh I first get to see the original default image/background combination for a split second, which then changes to the one from the code. The images are not too heavy, about 200KB both, but it still takes them some time to load.
As a workaround I’ve set the default image in the Wix editor to 1x1.png, but I suppose it’s not ideal.

import wixWindow from 'wix-window';
import wixLocation from 'wix-location';

const homepageImages = {
 0: {
        illustration: 'wix:image://...',
        background: 'wix:image://...',
    },
 1: {
        illustration: 'wix:image://...',
        background: 'wix:image://...',
    },
 2: {
        illustration: 'wix:image://...',
        background: 'wix:image://...',
    },
 3: {
        illustration: 'wix:image://...',
        background: 'wix:image://...',
    },
}

// Change image every minute
const currentDate = new Date();
const imageIndex = Math.floor(currentDate.getMinutes() % 4);

$w.onReady(() => {
 
 if (wixWindow.rendering.env === "backend") {
        $w("#homePageIllustration").src = homepageImages[imageIndex].illustration;
        $w("#topSlides").children[0].background.src = homepageImages[imageIndex].background;
    }

 if (wixWindow.rendering.env === "browser") {
        $w("#homePageIllustration").src = homepageImages[imageIndex].illustration;
        $w("#topSlides").children[0].background.src = homepageImages[imageIndex].background;
        console.log("Random index (browser): " + imageIndex);
}
}

As you can see, I’ve tried to explicitly load images on both backend and in the browser context, but it didn’t really help much.
Is there a way to either preload images or to make sure that the default one is ignored?