正在加载所有静态资产时的加载屏幕

Question

我目前正在开发一个 vuejs 应用程序，它也会包含一些视频元素，我们希望在用户首次加载 Web 应用程序时预加载这些视频。

最好的方法是什么？我想也许听众喜欢

document.addEventListener("DOMContentLoaded", ready);

调用 vue 的就绪函数？我知道 vue 有 v-cloak 但我不想在每个页面上都使用它，理想情况下我们不想在初始加载后看到加载屏幕，关于我可以使用什么解决方案的任何想法，或者是上面一个可以吗？

Answer 1

您可以在 App.vue 主文件中使用 onreadystatechange 方法，它会告诉您 DOM 是否准备就绪

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

}

正在加载所有静态资产时的加载屏幕

Loading screen while all static assets are being loaded

javascript

dom

loading

vue.js