javascript 如何在加载网页之前制作预加载器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19275957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a preloader before web page even loaded?
提问by user2002495
I'd like to make a preloader bar that shows how much the page is loading before it is fully loaded (something like pushcollective.com, notice the upper bar before the page is fully load).
我想制作一个预加载栏，显示页面在完全加载之前加载了多少（类似于 pushcollective.com，注意页面完全加载之前的上方栏）。
How can I achieve something like this? I imagine directing the user into a loading page first and request the page using AJAX and put the requested content into a divafter it has finished loading. But I don't think that's a clean solution?
我怎样才能实现这样的目标？我想象先引导用户进入加载页面，然后使用 AJAX 请求页面，并在div完成加载后将请求的内容放入 a 中。但我不认为这是一个干净的解决方案？
回答by matewka
The website you provided a link to (http://pushcollective.com/) uses NProgress.js plugin. As far as I was able to explore it uses random values to increment the progress bar (IMHO not a very elegant solution but I guess the only possible).
Here is a snippet from plugins code:
您提供链接的网站 ( 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);
}
};
回答by Hooman Askari
Recently I came across with this simple and easy to use plugin for jQuery call PreLoadMe, I find it the Best so far:
最近我遇到了这个简单易用的 jQuery 调用 PreLoadMe 插件，我发现它是迄今为止最好的：
http://niklausgerber.com/blog/preloadme-a-lightweight-jquery-website-preloader/
http://niklausgerber.com/blog/preloadme-a-lightweight-jquery-website-preloader/
回答by user2002495
回答by Dmitry Mizin
I personally wouldn't think of what I'm about to propose as of a 'clean' solution, however here's another approach without an extra AJAX call to load the page:
我个人不会想到我将要提出的“干净”解决方案，但是这里有另一种方法，无需额外的 AJAX 调用来加载页面：
Separate your content into two parts: a progress bar and everything else (which would be an actual page content). The progress bar is never-ending, filling logarithmically. The filling logic should be in an tag placed right after your progress bar inside the . That way it will start working before everything's loaded, but after the progress bar appears.
将您的内容分为两部分：进度条和其他所有内容（这将是实际的页面内容）。进度条永无止境，以对数方式填充。填充逻辑应该位于 . 这样它就会在所有内容加载之前开始工作，但在进度条出现之后。
Make the "actual content" block hidden initially. Subscribe to DOM Ready event. When it fires, hide the progress and show the content. Or you can show full progress for a split of a second and then hide it.
最初隐藏“实际内容”块。订阅 DOM Ready 事件。当它触发时，隐藏进度并显示内容。或者您可以显示一秒钟的完整进度，然后将其隐藏。
I don't think of the above as of 'clean', because it doesn't reflect actual progress, but it doesn't seem to do so in example you've mentioned either.
我不认为上述是“干净的”，因为它没有反映实际进展，但在您提到的示例中似乎也没有这样做。
