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?

score 0 · Answer 1 · answered Oct 01 '19 at 15:42

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

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

1 Answers1