I got a random image working on the client side; but am wondering if there is a way to randomly update the image source on the backend/server rendering so there isn’t a time where the image changes on the client side. Here is my code:
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
import wixWindow from ‘wix-window’;
import wixData from ‘wix-data’;
// $w.onReady(function ()
// {
// if (wixWindow.rendering.env === “backend”)
// {
// let res = wixData.query(“HomePageHeroes”).find();
// let items = res.items;
// let count = items.length; // how many images do we have?
// let rnd = Math.floor(Math.random() * count);
// $w(‘#footerImage’).src = items[rnd].heroImage; // get a random image
// }
// });
$w.onReady( async function () {
// Check the render cycle so this is just done once.
// Otherwise, server-side will render, and then the image
// switches to the image that the client-side rendered.
if (wixWindow.rendering.renderCycle === 1)
{
let res = await wixData.query(“HomePageHeroes”).find();
let items = res.items;
let count = items.length; // how many images do we have?
let rnd = Math.floor(Math.random() * count);
$w(‘#footerImage’).src = items[rnd].heroImage; // get a random image
}
});
You can view the image just above the footer here: dbloom6.wixsite.com/website - upon reload, you’ll see it displays one image from the dataset briefly, and then switches it to another. Help is greatly appreciated!