检查是否在 Vue 中加载了所有内容（包括视频）？答案

【问题标题】：Check if everything (including video) is loaded in Vue?检查是否在 Vue 中加载了所有内容（包括视频）？
【发布时间】：2017-12-12 12:05:05
【问题描述】：

我有一个 Vue 项目，由于嵌入了 html5 视频而变得有点大，我想知道如何解决这个网站的加载问题。

有没有办法知道 Vue 中是否已加载所有内容，以便在一切准备就绪之前显示加载屏幕？这种加载是否考虑到图片、视频等资产加载？

【问题讨论】：

视频不应该阻止网站同时加载网页的其余资产，所以我真的不认为有任何解决方案可以解决这个非问题（就视频而言） )。
因为视频将是一个后台运行的视频，我希望在显示页面之前先加载所有内容，这样如果连接低于平均水平，它就不会显得生涩或挂起。而且，这让我想到了 Vue 中的预加载器，Vue 是如何处理加载的？

标签： vue.js loading

【解决方案1】：

如果您想在显示视频之前等待网页的其余部分完成加载，您可以等到窗口加载完毕（load 事件），然后通过v-if 显示视频。

这里有一些额外的事情需要考虑（你使用的是 webpack，对吗？）：

代码拆分

如果你的 JS 包变得太大，你可以把它分成更小的块，webpack 运行时会按需异步下载这些块。

我喜欢将我的供应商代码拆分成一个单独的块，以及像这样拆分一些路由器组件：

{
  path: 'foo',
  component: () => import('./components/foo.vue'),
}

有关详细信息，请参阅 Code Splitting（Webpack 文档）和 Async Components（Vue 文档）。

加载页面

在启动 Vue 应用程序之前，当浏览器下载 HTML 和 JS 资产时，您的网页最初会显示为空白。在此期间，您可以显示任何您想要的纯 HTML 内容，然后将根 Vue 组件挂载到正在加载的 HTML 上。

const App = {
  template: '<div>My App</div>',
};

function bootstrap() {
  new Vue({
    el: '#app',
    render: h => h(App),
  });
}

// Simulate loading
setTimeout(bootstrap, 2000);

body {
  font-family: sans-serif;
}

@keyframes loading-anim {
  from { opacity: 1; }
  to { opacity: 0.3; }
}

.loading {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 40px;
  color: #888;
  letter-spacing: -0.05em;
  font-weight: bold;
  animation: loading-anim 1s ease-in-out alternate infinite;
}

<div id="app">
  <!-- Put whatever loading HTML content here -->
  <div class="loading">LOADING</div>
</div>

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

【讨论】：

感谢您的回复！我实际上是在尝试加载事件，但似乎无法让窗口的侦听器与 Vue 通信。你是如何得到它来改变 Vue 的数据的？