如何使用Vue.js预加载图像？ [英] How to preload images using Vue.js?

问题描述

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

我试过更多不同的方法，但无法预先加载图像。问题：

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




• 我无法通过在图像阵列上使用简单的for循环来预加载图像（

  
  
  

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

    const image = new Image（）; 
    

  然后你可以为该图像分配一个src值：

    image.src ='test.jpg'
    

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

  
  
  

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

  
  

  I have a small app using Vue.Js (with webpack). I have a transition section. When the user clicks to a button the content going to change. It's a simple DIV element with an IMG child element. My problem is when the user clicks the button, the next image will be loaded in real-time and it's slow, so somehow I need to preload these images.

  I tried more different approaches but couldn't achive the images be preloaded. The problems:

  • Only the first image is the part of the DOM, when page displayed, so the other images will be not loaded. Ok, it's the normal behavior.

  • I couldn't preload the images by using a simple for-loop on an images array (JavaScript Preloading Images) because images will be requested by a unique query string () to each request. So the preloaded image names will not match with the requesteds.

  • I tried to load the images using require() and bind it to the IMG tag's scr property. It's also not solved my problem, the images will be loaded in real-time after the click when the new DIV will be inserted into the DOM.

  my simplified single file compontent (.vue) looks something like that:

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

  I'm new in Vue.js, maybe my approach it's not good. Please let me know what is the good approach!

  解决方案

  I quickly tried this out in the browser but it seems to work in console. You can use the Javascript Image object to pre-load images it seems:

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

  You can create a new Image object like so:

  const image = new Image();
  

  Then you can assign a src value to that image:

  image.src = 'test.jpg'
  

  When you supply the src property with data immediately a network request will be fired by the browser which should be sufficient for the image to be loaded and cached. This way you don't have to insert these images into the DOM.

  Someone correct me if I am wrong on this though, haven't tried to out fully.

  这篇关于如何使用Vue.js预加载图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！