How can I preload images for use in a transition-group

Question

I have a transition-group containing two or more images. This is working, but now I want to preload the next image in line.

This is what I have now:

 <template>
     <transition-group name="fade" tag="div">
         <div v-for="i in [currentIndex]" :key="i" class="absolute inset-0">
             <img :src="currentImg" class="object-center object-cover w-full h-full" rel="preload" />
         </div>
     </transition-group>
 </template>

Every time I update currentIndex, currentImg gets computed, so that works. Now I need to preload the currentIndex + 1 image. Is this possible?

Answer 1

If you want to preload an image, you can previously initialize an image in JavaScript, that's not mounted in the DOM:

var preloadingImg = new Image;
preloadingImg.src = "/path/to/img.jpg"; // replace string with img source of [currentIndex + 1]
// optional callback when it's loaded:
preloadingImg.onload = function(event) {
   // ...
}

As long as the browser keeps the image in cache, the source link will not be requested again.
(Deleting the variable has no influence in the cache of the image.)