Question

如何实时加载Vue.js的页面百分比，以便在此页面上显示？ Google中没有任何内容，每个人都在谈论针对这个问题的setTimeout :)顺便问一下，这是真的吗？

Answer 1

使用Navigation Timing API测量页面加载进度的文章here。以此为基础，您可以创建可在您的网页上使用的mixin：

const PageLoadProgress = {
  created() {
      let perfData = window.performance.timing;
      let estimatedTime = Math.abs(perfData.loadEventEnd - perfData.navigationStart);
      this.loadTime = parseInt((estimatedTime / 1000) % 60) * 100;
      this.doProgress();
    },
    methods: {
      doProgress() {
        let step = this.loadTime / 100;
        this.interval = setInterval(() => {
          this.loadingPercent++
        }, step);
      }
    },
    computed: {
      loaded() {
        return this.loadingPercent + '%'
      }
    },
    watch: {
      loadingPercent(val) {
        if (val >= 100) {
          console.log('complete');
          clearInterval(this.interval)
        }
      }
    },
    data() {
      return {
        loadingPercent: 0,
        loadTime: 0,
        interval: null
      }
    }
}

所有这一切都需要估算的网页加载时间，然后使用setInterval计算百分比的更新频率，我还添加了watcher来清除时间间隔负载进度达到100％。

您需要做的就是显示您的加载进度。我使用的是计算机，因为如果你想更新进度条，它会更容易传递给width属性，所以：

  <div v-if="loadingPercent < 100">
    <div class="progress-bar">
      <div class="fill" :style="{width:loaded}"> {{loaded}}</div>
    </div>
  </div>
  <div v-else>
    Page Loaded
  </div>

几乎就是这样。重要的是要注意这是一个估计值，因此在加载程序达到100％之后页面可能仍未完全加载。如果这是一个问题，您可能需要附加一个onload事件来检查加载是否完整，但我会将其留给您。

无论如何，JSFiddle：https://jsfiddle.net/13kmujoL/

Answer 2

上周我试图这样做。我发现我不能得到任何百分比，只有开始的那一刻，并且结束。

我唯一能想到的就是这种模拟：

在退出的组件上：

on beforeDestroy激活加载器并在~0.3s

在输入的组件

如果您没有任何需要加载的数据 - ＆gt;在比前30％
如果您有需要加载的数据 - ＆gt;在与前30％相同的时间内加载另外30％ - ＆gt;触发$ http，当你得到你的响应时，装载器的时间比前30％

我的建议是在mixin中使用beforeDestroy加载30％，然后根据布尔变量“isDataToLoad”（默认为true）加载下一个70％，可以转换为“false”（和在mount（）

希望有所帮助

获取加载页面的百分比。 Vue.js

2 个答案: