如何使用Vue.js预加载图像？

Question

我有一个使用Vue.Js（带有webpack）的小应用程序。我有一个过渡部分。当用户单击按钮时，内容将更改。这是一个DIV带有IMG子元素的简单元素。我的问题是，当用户单击按钮时，下一个图像将被实时加载并且速度很慢，因此我需要以某种方式预加载这些图像。

我尝试了不同的方法，但无法实现图像的预加载。问题：

• 显示页面时，只有第一个图像是DOM的一部分，因此不会加载其他图像。好的，这是正常行为。

• 我无法通过在图像数组上使用简单的for循环来预加载图像（使用JavaScript预加载图像），因为图像将由唯一的查询字符串请求（）到每个请求。因此，预加载的图像名称将与请求的名称不匹配。

• 我尝试使用加载图像require()并将其绑定到IMG标签的src属性。这也没有解决我的问题，当新的图像DIV插入DOM 后，单击后图像将被实时加载。

我的简化单文件组件（.vue）如下所示：

<template>
    <!-- [FIRST] -->
    <div v-if="contentId == 0">
      <transition
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
        mode="out-in">
        <img :src="images.firstScreenShot" key="firstImage">
      </transition>
    </div>
    <!-- [/FIRST] -->

    <!-- [SECOND] -->
    <div v-else-if="contentId == 1">
      <transition
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
        mode="out-in">

        <img :src="images.secondScreenShot" key="secondImage">
      </transition>
    </div>
    <!-- [/SECOND] -->
</template>
<script>
    export default {
        data() {
            return {
                contentId: 0,
                images: {
                    firstScreenShot: require('./assets/first-screen-shot.png'),
                    secondScreenShot: require('./assets/second-screen-shot.png'),
                }
            }
        }
    }
</script>

我是Vue.js的新手，也许我的方法不好。请让我知道什么是好的方法！

Answer 1

我很快在浏览器中尝试了一下，但似乎可以在控制台中使用。您可以使用Javascript Image对象预加载看起来像的图像：

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/Image

您可以这样创建一个新的Image对象：

const image = new Image();

然后，您可以为该图像分配src值：

image.src = 'test.jpg'

当您向src属性提供数据时，浏览器将立即触发网络请求，该请求应足以加载和缓存图像。这样，您不必将这些图像插入DOM。

如果我在此方面做错了，请有人纠正我，但仍未尝试完全解决。

Answer 2

如果您使用模板来加载带有标签的图像，您可以使用简单的 HTML 来使用rel="preload"来预加载图像。

例子：

<img :src="images.secondScreenShot" key="secondImage" rel="preload">