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

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) {
   // ...
}

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