What is the best way to change photos?

Question

JavaScript

There is a product on display.

<div class="item">
  <img src="1.jpg" data-images="2.jpg">
</div>

When I move the mouse over the image, I change the SRC of the original to the one in data-images
The problem is that when the user hovers over the image, it does not change immediately, but it may take 1.5s, because there is a background pending

How to make it so that would the pictures have already been uploaded?
All the pictures I have are cached in the browser /

how would I go over all the data-images so that they get into the browser cache?
Thank you.

Answer 1

Load all the pictures into different layers and change the z-index of the active one.
Or load only 2-3 next or previous ones (going in a carousel to the left or right).
Upgrade complete.