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?