Hoover on repeater button

[CODE-NINJA]

You both are flying like bees around their blooming flowers…
You are not far away from possible fast working solution (one of possible solutions).

So we know, that we have some problems with loading timings if it comes to load images on hover. Hovering is a process of milliseconds, so the IMAGE must be delivered in that time. In this case we recognize that loading those images are delayed.

So question → HOW TO LOAD THEM FASTER?

1. Maybe not on → HOVER ← but already before.
   (This you both i think already have figured out).
   But how exactly?

2. Maybe → again using the repeaters → onItemReady() ← and loading the images already before → HOVERING ← but direcly collapsing() or hiding() them and only showing them when needed → on HOVER. ???

Could this work?

This yellow marked field already was the idea behind it.

And what about your IMAGE-sizes and type?

Images loading very slowly on site

Hi everyone, I have been having some issues with hero images and loading times. Our website is currently lagging when loading hero images on our webpages. The image appears blurry for about 5-8 seconds before loading properly. We are currently using Wix Studio and have tried a handful of solutions including compressing the image sizes, switching the images to different file formats, implementing and then removing lazy loading, etc. Has anyone figured out what the root of this loading issue could…

Is there still space to reduce the size of your images? The smaler the image → the faster their loadings.

Depending on how big your images are in size, you even can hold them as base64-data-string inside an OBJECT, but not 100% sure if this will work → again back to the variable-solution, then it wouldn’t matter how much images you have, since you do no stacking but instead pushing your images as BASE64-STRING-DATA into your object!

Could that work ?

1. Direct Access vs. Event Binding

• When you store your image URLs (or any data) in an object, you can access them directly by their keys. This is very efficient because JavaScript objects provide constant-time access (O(1)) to their properties.
• On the other hand, when you use onItemReady in a repeater, you’re binding event handlers for each item in the repeater. This means that for each item, the code inside onItemReady will run when the user interacts with the item, and this introduces some overhead for each individual repeater item. Additionally, the event handler has to deal with DOM manipulation for each individual item, which can be more computationally expensive.

2. Reduced Overhead

• Preloading images into an object or an array before any user interaction reduces the need for network calls or fetching resources repeatedly. This preloading reduces any delay when you access the data later (like when hovering over a button).
• Repeaters, on the other hand, require more resources to process the item content and bind interactions (i.e., what happens on hover). This can add up if there are many items in the repeater, causing delays or a reduction in performance, especially for things like images.

I think there is now enough of input about your issue.