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

时间:2018-01-04 07:17:16

标签: javascript vue.js preload

我有一个使用Vue.Js的小应用程序(使用webpack)。我有一个过渡部分。当用户点击按钮时,内容将发生变化。它是一个带有IMG子元素的简单DIV元素。我的问题是当用户点击按钮时,下一个图像将实时加载并且速度很慢,所以我需要预先加载这些图像。

我尝试了更多不同的方法,但无法预先加载图像。问题:

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

  • 我无法通过在图像数组(JavaScript Preloading Images)上使用简单的for循环来预加载图像,因为图像将由唯一的查询字符串(1)请求请求。因此预加载的图像名称将与请求的名称不匹配。

  • 我尝试使用require()加载图像并将其绑定到IMG标记的scr属性。它也没有解决我的问题,当新的DIV插入DOM时,图像将在点击后实时加载。

我的简化单个文件compontent(.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的新手,也许我的做法并不好。请让我知道什么是好方法!

3 个答案:

答案 0 :(得分:4)

我很快在浏览器中尝试了这个,但它似乎在控制台中工作。您可以使用Javascript Image对象预先加载图像:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

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

const image = new Image();

然后您可以为该图像指定src值:

image.src = 'test.jpg'

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

如果我错了,有人会纠正我,但是没有尝试完全。

答案 1 :(得分:1)

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

示例:

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

答案 2 :(得分:1)

我创建了一个函数,只是通过参数发送要加载的图像对象。

在路由器中

import Digital from '../../images/digital';
import { loadImage } from '../LoadImage';
...

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'welcome',
      component: Welcome,
      beforeEnter(to, from, next) {
         loadImage(Digital);
      }
   }
]

我的功能

export function loadImage(imagesObject) {
  Object.keys(imagesObject).map((key, index) => {
    const img = new Image();
    img.src = imagesObject[key];
  });
}

希望有帮助