Loading screen while all static assets are being loaded

Question

I am working on a vuejs application at the moment, that will have some video elements too it, we are wanting to preload these videos when a user first loads the web application.

What is the best way of doing this? I thought maybe a listener like,

document.addEventListener("DOMContentLoaded", ready);

with the ready function invoking vue? I know vue has v-cloak but I don't want to use that on every page, ideally we don't want to see a loading screen after the intial load, any thoughts on what solution I could use, or is the one above OK?

Answer 1

You can use onreadystatechange method in your main App.vue file which will tell whether your DOM is ready or not

created(){
    document.onreadystatechange = () => { //To load the app only after all libraries are loaded
    if (document.readyState == "complete") { 
        this.loadApp = true;
    } 
   }

}