2

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

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

4

4 回答 4

1

您提供链接的网站 ( http://pushcollective.com/ ) 使用NProgress.js 插件。据我所知，它使用随机值来增加进度条（恕我直言，这不是一个非常优雅的解决方案，但我想这是唯一可能的）。
这是插件代码的片段：

/**
 * 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);
    }
  };
于 2013-10-09T15:49:46.390 回答
0

好吧，我以 结尾pacejs，它非常酷，易于使用且易于配置。大家可以看看这里，谢谢大家的回答。

于 2014-04-15T11:16:11.820 回答
0

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

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

最初隐藏“实际内容”块。订阅 DOM 就绪事件。当它触发时，隐藏进度并显示内容。或者，您可以在一秒钟内显示完整进度，然后将其隐藏。

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

于 2013-10-09T15:42:17.367 回答
0

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

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

于 2014-01-27T12:58:25.567 回答