You spoke GOLDEN-WORDS! 
And here you just nailed it totaly!
In 4-5 years of using wix → those troubles about this functionality never really worked stable. (negative note for wix, unfurtenally) and the provement can be found on provided examples in my last answer (but i still have hope wix will improve their stability → loading of IMAGES) → auto-preload or similar and making the show() / hide() functionality stable enough.
I came a lot of times accross such similar issues/problems regarding image loading, hiding, showing, collapsing, expanding and using animation on them and those problems did not stop only on IMAGES (basically on almost all elements dealing with mentioned functionalities).
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. :smiling_face_with_sunglasses:
This i know aswell and often am in same situation. You simply can’t keep everything on your mind and you you have to refresh sometimes. The same rules for every coder i think.
Hi there to everybody @CODE-NINJA and @onemoretime .
Thank you for your insipiring comments and helpful posts. So it’s a fact that preloading images isn’t a thing in wix for now.
I used the transparent png image trick and it works!!! no more glitch when you switch from one button to another. no more show() or hide() methods. All images compressed and “squoshed”, few kbytes, as said before.
I think is solved now. I’ll share the code ( thanks again @CODE-NINJA for ordering and working directly on this code)
// actually working code ----->
//--------------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("#imageX19").show();
$w(`#${IMAGE[0]}`).show();
$w(`#${REPEATER}`).onItemReady(($item, itemData, index) => {
console.log('INDEX: ', index);
//console.log('Item-Data: ', itemData);
extractedData = data_Exctraction([itemData], extractedData, index);
console.log(extractedData);
$item("#button1").onMouseIn(() => {
console.log("BUTTON hover");
// maybe not necessary... --- $w(`#${IMAGE[0]}`).src = itemdata.image;
$w(`#${IMAGE[0]}`).src = extractedData[index].image;
});
$item("#button1").onMouseOut(() => {
console.log("BUTTON unhover");
//change src with a transparetn png image
$w(`#${IMAGE[0]}`).src = "https://static.wixstatic.com/media/ccf9d9_d8109d37a2c64feeac0fefb70db2c515~mv2.png";
});
});
});
});
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;
}
the only latency I’d like to reduce, I think, is the time beetwen hover and the image change… still a bit too long but I’m satisfied as it is right now 
I’ll continue testing and post here if I discover something else.
.