Javascript 如何在网页加载之前进行预加载？

我想制作一个预加载条，显示页面在完全加载之前的加载量（类似于pushcollective.com，请注意页面完全加载之前的上栏）

---

我怎样才能做到这一点？我设想首先引导用户进入一个加载页面，使用AJAX请求该页面，并在加载完成后将请求的内容放入

div

。但我不认为这是一个干净的解决方案？

我个人不认为我将要提出的是一个“干净”的解决方案，但是这里有另一种方法，不需要额外的AJAX调用来加载页面：

将内容分为两部分：进度条和其他所有内容（这将是实际的页面内容）。进度条是无止境的，以对数方式填充。填充逻辑应该在一个标签中，该标签位于进程条的正后方。这样，它将在加载所有内容之前开始工作，但在进度条出现之后

使“实际内容”块最初隐藏。订阅DOM就绪事件。当它激发时，隐藏进度并显示内容。或者，您可以在一瞬间显示全部进度，然后将其隐藏

---

我不认为上述内容是“干净的”，因为它并不反映实际的进展，但在您提到的示例中，它似乎也不反映实际的进展。

您提供的链接（）所使用的网站。据我所知，它使用随机值来增加进度条（这不是一个非常优雅的解决方案，但我猜是唯一可能的）。
以下是插件代码的一个片段：

/**
 * Increments by a random amount.
 */

  NProgress.inc = function(amount) {
    var n = NProgress.status;

    if (!n) {
      return NProgress.start();
    } else {
      if (typeof amount !== 'number') {
        amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95);
      }

      n = clamp(n + amount, 0, 0.994);
      return NProgress.set(n);
    }
  };

---

最近我遇到了这个简单易用的jQuery调用Prelode插件，我发现它是迄今为止最好的：

---

好吧，我以

pacejs

结束，它非常酷，易于使用，易于配置。你们可以查看一下，谢谢所有的答案。

你们提出的解决方案是使用轻量级页面对内容进行AJAX请求，在收到每一位时更新进度，然后组装和显示内容。为什么你认为这不是“干净”？显示进度条并伪造加载百分比，然后在加载完成后，快速完成加载条并显示内容。@恶心：因为这只是一个想法，我真的不知道怎么做，也许我不应该使用“干净”这个词毕竟，我的错误，英语不是我的主要语言。我不认为pushcollective.com上的进度条显示了实际的加载状态。我认为他们随机添加值，当ajax响应返回时，他们只是填充并隐藏它。拥有一个页面并在一个请求中请求其所有内容并不是最好的方法。您可以将网站创建为单页应用程序，并使用后续请求加载所有需要的内容：标记、数据、图像。这样，你可以更准确地更新进度条。谢谢，但这正是我想到的第一件事，我把它扔掉了，因为我需要显示实际进度。如果你真的需要实际进度，那么我看到的唯一选择就是执行以下操作。在开发时或多或少准确地了解页面内容，您可以标记页面的某些点以将其用作加载里程碑。然后，在我在回答中描述的脚本中，您可以通过使用

document.getElementById

或其他方法来轮询这些里程碑，以检查它们是否已加载到DOM。如果有，则相应地移动进度条。它会起作用，但我个人会选择对数填充的进度条。