Hoover on repeater button

[CODE-NINJA]

Open the provided site again.

1. Switch between first 2 elements!
2. Switch between 3 and 4 element!

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…

LIVELLO 6 | ESEDRA

You will recognize something strange.
But Do you also feel it is working faster on position 1 and 2 ?

VIDEO

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).

2. 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.