vuejs2 - 如何预加载图像以在过渡组中使用

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

只要浏览器将图像保存在缓存中，就不会再次请求源链接。
（删除变量对图像的缓存没有影响。）