The problem: I am trying to display a picture on an image element, using java script, on my website (click on Start and you should see a picture on the right side). Before showing the right picture, the image element flickers for a second showing another picture in my gallery.
Background: The picture displayed in the image element is selected from an array of urls (the urls belong to the pictures I uploaded to the media gallery of the website).
const allLogos = ['https://static.wixstatic.com/media/c6a999_a9f67b4bc78e4898ab270da1c0b3b818~mv2.jpg',
'https://static.wixstatic.com/media/c6a999_32968062156f4e0bb8fdf08e8dd1949f~mv2.jpg',
'https://static.wixstatic.com/media/c6a999_20bfba3a307f4270a6736d6003862269~mv2.jpg',
'https://static.wixstatic.com/media/c6a999_53c8011ffd214bfd9dd890e39260a0c8~mv2.jpg'];
const logosnames = ["NationalGeographic", "BesteRecepten", "LekkerEnGezond", "NOS"]; //this is just for me to keep track of the logos names
I use a randomiser to select one out of the four pictures as logo1.
export function shuffle2(array1, array2) {
for (let i = array1.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array1[i], array1[j]] = [array1[j], array1[i]];
[array2[i], array2[j]] = [array2[j], array2[i]];
}
return [array1, array2];
}
//shuffles logos
const mixedlogosall = shuffle2(allLogos, logosnames);
const mixedlogos = mixedlogosall[0];
const logosorder = mixedlogosall[1];
const logo1 = mixedlogos[0];
I use this code to display the picture:
$w.onReady(function () {
console.log("in onReady");
console.log(logo1);
$w('#image3').src = logo1; //defines the logo used in tab1
$w("#image3").fitMode = "fill"; //make sure the logo is not cropped
I have tried showing the picture without the randomiser and the flickering disappears, but I do need the pictures to be randomised per website visitor. Notice that the presence of the flickering is not always constant. Please, let me know if there is more information I can provide. Thanks!
I have changed the picture to a transparent placeholder and it still does the flickering thing. 