How to load all images on a page using a reactive variable in Vue?

Question

Vue.js

There is a type code

<div>
        <img  v-scroll="handleScroll" :src="image">
    </div>

The image variable contains a link to the image, which changes depending on the scroll on the page. There are four pictures in total.
Problem: The server is slow and far away. The link to the picture changes, the browser, seeing the new link, loads it for a couple of seconds, which leads to a buggy change of the picture a couple of seconds later than we would like.

How can I load all four pictures at once so that the browser changes them instantly? I saw the v-show directive in the documentation, but I do not quite understand how to use it.
Perhaps a completely different approach to changing links to pictures is needed here, and how I do it is a completely dubious code.

Answer 1

How can I load all four pictures at once so that the browser changes them instantly?

Google for "javascript image preloading".
The bottom line is that at the beginning of work, you simply create an img element in the code and manually put src on your image, the browser will load this image accordingly and it will already be in the cache, i.e. will be delivered quickly