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

Question

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

做到这一点的最佳方法是什么？我以为也许是像

document.addEventListener("DOMContentLoaded", ready);

使用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;
    } 
   }

}