Briefly: Can a virtual node be created outside of the DOM to preload images, seek videos... without ever being mounted in the real DOM?
Detailed version:
I want to ensure that the next slide appears only when it is fully initialized for a slideshow in VueJs. This means not only loading images and videos but also performing tasks that take time, like seeking to a position in a video...
To achieve this, I created an async function beforeChangePage that runs before page change. Unfortunately, I'm unsure how to have it "preload" the component without mounting it on the DOM. Currently, what happens is that the slide displays first, then the images are loaded (I intentionally used an image that takes 3 seconds to appear). Similarly, the video may be seeked after displaying, causing a glitch.
I could potentially use a combination of CSS hidden: true to mount the slide a few pages earlier to ensure images load properly, but I prefer a solution that operates entirely external to the DOM.
You can view the full demo here.
The preloaded component:
<script>
import { ref, inject, provide, resolveComponent } from 'vue'
export default {
beforeChangePage: async () => {
await new Promise(r => setTimeout(r, 0)); // Just to check if transition can wait
console.log("Can I preload images without inserting in the DOM at this step?");
console.log("Can I fetch the video now to ensure it's at the correct position?")
console.log("Something like:");
// let video = document.getElementById("video");
// video.currentTime = 5.2;
// await new Promise(r => {
// video.addEventListener('seeked', (event) => {
// r()
// });)
}
}
</script>
<script setup>
let page = inject("page", 42);
</script>
<template>
<div v-if="page == 1">
Here is a concept with an image that takes time to load. I don't want it mounted until the image loads. Ideally, images would load without listing each one.<br/>
<img src="http://www.deelay.me/3000/http://placekitten.com/300/200"/>
There is also a video that should not be mounted before reaching time 5.2. The aim of beforeChangePage is to ensure this.
<video>
<source src="http://www.w3schools.com/html/mov_bbb.mp4"/>
</video>
</div>
</template>