If you want you can send me an invitation to your project. I would like to take a closer look onto your issue. I do not want to reconstruct your issued situation, just to find out what exactly the problem is. → velo-ninja@outlook.com
I would take a direct look onto the issue.
wow thank you! !!!
i did it. page LIVELLO 6
Give me some time for inspection. Can take a while… process running…
You can check taht?
Would this be enough?
EDIT:
No it won’t i just saw again some delay.
Ok next try…
if you hide the imageX18 onMouseOut, at line 36, you should see the background image revealing ( imageX19 ).
with this configuration the delay is more noticeable. PLease, Have a try
Open the provided site again.
The background image is now hidden and no fade-out or in is activated now.
Test it on your side in the published version, provided here…
You will recognize something strange.
But Do you also feel it is working faster on position 1 and 2 ?
This is how it looks like on my side.
What has been done so far…
FIRST-TRY: Optimization-attempt by the mentioned own variable, preloaded…(which did not really improve anything out of my view.
//--------------USER-INTERFACE------------------------
const DATASET = 'dataset1';
const REPEATER = 'repeater1';
//----------------------------
var IMAGE = [];
IMAGE[0] = 'imageX18';
var extractedData = [];
$w.onReady(()=> {console.log("Page ready");
$w(`#${DATASET}`).onReady(()=> {console.log("DATASET ready");
$w(`#${IMAGE}`).hide();
//$w("#imageX1").collapse();
$w(`#${REPEATER}`).onItemReady(($item, itemData, index)=> {console.log('INDEX: ', index);
//console.log('Item-Data: ', itemData);
extractedData = data_Exctraction([itemData], extractedData, index); console.log(extractedData);
//imageUrls.push(itemData.image);
//preloadedImages.push($item("#imageX1"));
//$w(`#${IMAGE}`).src = imageUrls[index];
$item("#button1").onMouseIn(() => {console.log("BUTTON hover");
$w(`#${IMAGE}`).hide();
$w(`#${IMAGE}`).src = extractedData[index].image;
$w(`#${IMAGE}`).show();
//preloadAndShowImage(itemData.image);
});
$item("#button1").onMouseOut(() => {console.log("BUTTON unhover");
// Hide the image on mouse out to reveal the default one behind
});
});
});
});
function data_Exctraction(data, targetArray, offset = 0) {
if (!Array.isArray(data)) {console.warn("Data is not an array"); return targetArray;}
const existingIds = new Set(targetArray.map(item => item.id));
data.forEach((item, i) => {
if (!existingIds.has(item._id)) {
targetArray.push({
id: item._id,
image: item.image,
title: item.title,
index: i + offset // add index
});existingIds.add(item._id);
}
});return targetArray;
}
Well, the setup you see on VIDEO is working by this current code.
On load i tried already push only neccessary data into an own VARIABLE and then loading from it only on hover. But this did not work, since the major problem will be the process of pushing data into the SCR of → IMAGE (loading-image-process).
Since we now know a little bit more, let’s do another TRY…–> optimizing our images…
a) Size of your original IMAGES → 350kb in jpg-format !!!
b) I compressed your images in my first attempt to → 175kb (50% size-reduction).
was still not enough and i could see glitches.
c) I used → GIMP <— to reduce even more using → PNG-FILE → 80kb
d) I used → GIMP ← again and this time in → WEBP ← format → about 25kb.
e) I also cropped out all not needed section out of the image → reducing IMAGE-SIZE.
Result → on my end → everything works almost 100% now.
If it still do not work on your end and you have bigger glitches → then it is maybe about your internet-connection.
you’re right! it is…
cropped image = less kb i believe…so was a matter of image size, as you thought ?
did you try also showing the backgound image on mouse out? because the glitch was not just about delay, but also about showing the previous hovered image for a millisec before switching to the actual one. like this video
Now go back into your Editor and complete all tasks like shown in my descriptions.
All files are still inside of your images-folder.
You also can go back to the original code…
//ATTEMPT 4 FRUNZIOANTNE
//import wixData from 'wix-data';
//let imageUrls = []; // array per salvare gli URL delle immagini
// actually working code ----->
$w.onReady(function () {
console.log("Page ready");
$w("#dataset1").onReady(() => {
console.log("DATASET ready");
$w("#imageX18").hide();
//$w("#imageX1").collapse();
$w("#repeater1").onItemReady(($item, itemData, index) => {
console.log("REPEATER ready");
//console.log('Item-Data: ', itemData);
//console.log('Index: ', index);
//imageUrls.push(itemData.image);
//preloadedImages.push($item("#imageX1"));
//$w("#imageX18").src = imageUrls[index];
$item("#button1").onMouseIn(() => {
console.log("BUTTON hover");
$w("#imageX18").src = itemData.image;
$w("#imageX18").show();
//preloadAndShowImage(itemData.image);
});
$item("#button1").onMouseOut(() => {
console.log("BUTTON unhover");
// Hide the image on mouse out to reveal the default one behind
});
});
});
});
/*function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function preloadAndShowImage(imageUrl) {
console.log("START SOURCING IMG");
$w("#imageX18").src = imageUrl;
await delay(350); // simulating the onLoad()
console.log("END DELAY");
$w("#imageX18").show();
}*/
/*
// CODE SHARED ON WIX 24/04/2025 12 am ------>
$w.onReady(function () {
console.log("Page ready");
// Nascondi l'immagine di destinazione
$w("#imageX18").hide();
// Configura il repeater collegato al dataset
$w("#repeater1").onItemReady(($item, itemData, index) => {
console.log("REPEATER ready, index:", index);
// 1) Imposta src su un Image nascosto
$item("#imageX20").src = itemData.image;
const fullUrl = $item("#imageX20").src;
// 2) Preload della risorsa nella cache del browser
fetch(fullUrl)
.then(() => console.log("Preloaded image:", fullUrl))
.catch(err => console.warn("Preload failed for:", fullUrl, err));
// 3) Al hover sul button1, mostra l'immagine principale con URL HTTPS
$item("#button1").onMouseIn(() => {
console.log("BUTTON hover at index", index);
$w("#imageX18").src = fullUrl;
$w("#imageX18").show();
});
// 4) Al mouse out, nascondi l'immagine di destinazione
$item("#button1").onMouseOut(() => {
console.log("BUTTON unhover at index", index);
$w("#imageX18").hide();
});
});
});
*/
But since this setup works, you can also let it like it is.
1) Edit all your images and try to compress them as much as possible without a big loss of image-quality. Crop out not needed section inside of your images…this way you can reach a minimalistic size of just few kb —> about 20-30kb, maybe even less…
2) I also do not understand why you want to control your second image at all (imageX19).
Why do you wanna do that? There is no need for it! Let the backgroundimage static and only change the OVER-LAY-IMAGE → (imageX18), that’s it.
I am out of EDITOR → your turn now! Have fun and good luck.
First of all thank you so much for your help, very very appreciated.
So the conclusion is that it was not a matter of preload images, or code optimization but just an image size issue. i should have compress them more since the beginning.
1) I’ll compress/crop everything and get back to you again.
2 I just want to show the underlaying static imageX19 visible (but in the background), so I have only the highlighted part showed on hover on top with imageX18 as you perfectly already did…
the fact is… the glitch is still there! also on the first 2 button with the cropped optimazed images. Didn’t you notice?
Hmm, ok. First make all changes.
Once everything done and checked. Test it again (on published site on your end) and make video, what you see on your screen and how it behaves.
What i have seen on my screen is what have shown in the provided video.
Maybe i will take a second look later onto it (running out of time).. 
thanks again for your time. don’t worry
I’ll optimize everything and then made another video to show you the glitch if still persistent.
In your video the backgorund imageX19 was not present that’s why seems working
seems like it’s a tricky situation 
I never thought this topic would end up going on for so long. Hey, long time no see. 
No, the explanation would be (regarding my video) → even the background image was HIDDEN completely, the loading of OVERLAY was fast enough (even showing the not optimized images → 350kb <–) fast enough without glitches.
The first 2 images were optimized …
a) image-1 → about 80kb in png-file-format + CROPED
b) image-2 → about 25kb in webp-file-format + CROPED
The 3+4-image were ORIGINAL images → 350kb in JPG ← file-format.
Backgroundimage completely hidden.
I think I mentioned this before, but wasn’t it possible to load the image when the mouse enters the container box inside the repeater? 
I tried but no big changes…
What would be the goal behind?
You mean start the loading process already when entering the container, before reaching the button itself → Maybe a possible improvement (did not test it).
Your intention like …
Hmmm, maybe…
So for now, we’ve decided to stop using the fade effect, right?
Testing with a repeater felt like a bit of a hassle 
, so I used two boxes, two buttons, and an image to figure out how to avoid any glitches. It actually worked out nicely, so please try the same thing with the repeater.
$w.onReady(function () {
const image = $w("#image");
const imageSRC_A = "yourImageSrc_A";
const imageSRC_B = "yourImageSrc_B";
/*
$w('#containerA').onMouseIn((event) => {
image.src = imageSRC_A;
});
$w('#containerB').onMouseIn((event) => {
image.src = imageSRC_B;
});
*/
$w('#buttonA').onMouseIn((event) => {
image.src = imageSRC_A;
});
$w('#buttonB').onMouseIn((event) => {
image.src = imageSRC_B;
});
$w('#buttonA').onMouseOut((event) => {
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgX1JrMcAAAAASUVORK5CYII=";
});
$w('#buttonB').onMouseOut((event) => {
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgX1JrMcAAAAASUVORK5CYII=";
});
});
In this code, I commented out the part where the box triggers a preload event, because I felt it worked well enough without it. (Loading the image when the box is shown would make it display faster, but naturally, in this case, the image would appear even if the button hasn’t been interacted with…)
In the end, I realized that the glitches were probably caused by the previous image still being visible. So I decided to move away from the idea of using show() or hide() to control visibility, and instead focus on simply making the image “not visible” in any way.
That’s when I thought the fastest way might be to overwrite the image with a transparent 1-pixel PNG in Base64. I had an AI generate the Base64 for me, so I haven’t verified its accuracy, but using this method might be the quickest way to effectively “clear” the previous image.
Also, since the image element can always remain in a “visible” state, I won’t have to worry about conflicts between processes. So, with this method, the glitches might stop happening altogether.
This was not a bad idea. Using an empty base64 pixel without touching the show/hide functionality → small work-around, which could work.
I like your own ideas, this is how a good coder will always find a solution for any issue.
Now @emme_works first should do own investigations.
A lot of ideas for a working WORKAROUND have been mentioned already.
But at the end the result could still be the same, if i compare the shown videos and their results, especially, why was my setup working that fast without glitches (even with 350kb heavy images).
Hopefully this won’t be the endresult…
And the issue with IMAGE-PRELOADING is not new…
From my experience, problems like this—where we start to lose track of what we’re even doing—often end up having surprisingly simple solutions.
So I tried not to overthink it, played some games, and then the idea came to me. 
The base64 idea clicked thanks to your earlier hint. If captain hadn’t brought up base64 first, I don’t think I would’ve made the connection. I feel like I’ve used a similar idea a few times before, somewhere along the way in life—but I had totally forgotten about it. Now, after this, I don’t think I’ll ever forget it again. 
Base64 strings are slightly larger than the original image files, and from experience, hardcoding them directly into a file usually causes more trouble than it’s worth. But if it’s a reasonable size, it can actually be really convenient. 
One key realization this time was that using base64 skips the fetch time, which helps improve loading speed—that was another useful insight.
Also, just based on experience, using show() and hide() in Wix tends to cause issues. And adding animations to them often makes it worse.
If this actually fixes it, let’s call it a combo attack victory if this works! 
