title: How to preload images using Vue.js?
body: <p>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 <code>DIV</code> element with an <code>IMG</code> 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.</p>
  
  <p>I have tried different approaches but couldn't achive the images be preloaded. The problems:</p>
  
  <ul>
  <li><p>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.</p></li>
  <li><p>I couldn't preload the images by using a simple for-loop on an array of images (<a href="https://stackoverflow.com/questions/3646036/javascript-preloading-images">Preloading images with JavaScript</a>), because images will be requested by a unique query string (<img src="https://i.stack.imgur.com/4XjWE.png" alt="1">) to each request. So the preloaded image names will not match with the requested.</p></li>
  <li><p>I tried to load the images using <code>require()</code> and bind it to the IMG tag's <code>src</code> property. It's also not solved my problem, the images will be loaded in real-time after the click when the new <code>DIV</code> will be inserted into the DOM.</p></li>
  </ul>
  
  <p>My simplified single file compontent (.vue) looks something like that:</p>
  
  <pre><code>&lt;template&gt;
      &lt;!-- [FIRST] --&gt;
      &lt;div v-if="contentId == 0"&gt;
        &lt;transition
          enter-active-class="animated fadeIn"
          leave-active-class="animated fadeOut"
          mode="out-in"&gt;
          &lt;img :src="images.firstScreenShot" key="firstImage"&gt;
        &lt;/transition&gt;
      &lt;/div&gt;
      &lt;!-- [/FIRST] --&gt;
  
      &lt;!-- [SECOND] --&gt;
      &lt;div v-else-if="contentId == 1"&gt;
        &lt;transition
          enter-active-class="animated fadeIn"
          leave-active-class="animated fadeOut"
          mode="out-in"&gt;
  
          &lt;img :src="images.secondScreenShot" key="secondImage"&gt;
        &lt;/transition&gt;
      &lt;/div&gt;
      &lt;!-- [/SECOND] --&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          data() {
              return {
                  contentId: 0,
                  images: {
                      firstScreenShot: require('./assets/first-screen-shot.png'),
                      secondScreenShot: require('./assets/second-screen-shot.png'),
                  }
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm new to Vue.js, maybe my approach is not good. Please let me know what is the good approach!</p>