Question

我想创建一个预加载栏，显示页面在完全加载之前加载了多少（类似于pushcollective.com，在页面完全加载之前注意上面的栏）。

我怎样才能实现这样的目标？我想首先将用户引导到加载页面并使用AJAX请求页面，并在加载完成后将请求的内容放入div。但我不认为这是一个干净的解决方案吗？

Answer 1

您提供指向（http://pushcollective.com/）的链接的网站使用NProgress.js plugin。至于我能够探索它使用随机值来增加进度条（恕我直言不是一个非常优雅的解决方案，但我想唯一可能）。
以下是插件代码的片段：

/**
 * 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);
    }
  };

Answer 2

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

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

最初隐藏“实际内容”块。订阅DOM Ready活动。当它触发时，隐藏进度并显示内容。或者，您可以显示一秒钟的完整进度，然后隐藏它。

我不认为上面的'干净'，因为它不能反映实际的进展，但在你提到的例子中似乎没有这样做。

Answer 3

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

http://niklausgerber.com/blog/preloadme-a-lightweight-jquery-website-preloader/

Answer 4

好吧，我以pacejs结束，它非常酷，易于使用，并且易于配置。你们可以查看here，谢谢你的所有答案。

如何在网页加载之前制作预加载器？

4 个答案: