How to preload images using Vue.js?

Question

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 el

Answer 1

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.