Как я могу предварительно загрузить изображения для использования в переходной группе

Question

У меня есть transition-group, содержащий два или более изображений. Это работает, но теперь я хочу предварительно загрузить следующее изображение в строке.

Это то, что у меня есть сейчас:

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

Каждый раз, когда я обновляю currentIndex, currentImg получаетвычислил, так что работает. Теперь мне нужно предварительно загрузить изображение currentIndex + 1. Это возможно?

Answer 1

Если вы хотите предварительно загрузить изображение, вы можете предварительно инициализировать изображение в JavaScript, которое не смонтировано в 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) {
   // ...
}

Пока браузер хранит изображение в кэше, ссылка на источникбольше не будет запрашиваться.
(Удаление переменной не влияет на кэш изображения.)