在查看页面之前预加载并运行 jQuery/javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7418477/
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
Preload and run jQuery/javascript before viewing the page
提问by meltuhamy
I'm working on a project where there's quite a lot of jQuery going on. So when I go to the page, I can seethe jQuery running (e.g. $.button()elements on the page still appear as normal html elements before jQueryUI is loaded :S) so initially it looks all ugly THEN, once all the JS is loaded and executed, it looks "nice".
我正在做一个有很多 jQuery 的项目。所以当我进入页面时，我可以看到jQuery 正在运行（例如$.button()，页面上的元素在加载 jQueryUI 之前仍然显示为普通的 html 元素：S）所以最初它看起来很丑然后，一旦所有的 JS 被加载并执行，看起来很好”。
It's not just a case of preloading images or whatever, I want to RUN the jQuery code, but "hide" it from visitors so that once the page is opened, it looks "nice" straight away OR displays a black screen saying "Loading..." until the jQuery has finished running.
这不仅仅是预加载图像或其他什么的情况，我想运行 jQuery 代码，而是将它“隐藏”给访问者，这样一旦页面打开，它就会立即看起来“很好”，或者显示一个黑屏，上面写着“正在加载。 ..”，直到 jQuery 完成运行。
Take a look here: http://www.filamentgroup.com/, though I'm not sure that actually runs the site's javascript before displaying it, but it shows the basic idea of having a dark screen saying "Loading...".. I suspect that's what happens in large web apps such as SlideRocketthough it does use flash... :S
看看这里：http: //www.filamentgroup.com/，虽然我不确定在显示它之前是否实际运行了该网站的 javascript，但它显示了一个黑屏的基本思想，上面写着“正在加载...” .. 我怀疑这就是像SlideRocket这样的大型网络应用程序中发生的事情，尽管它确实使用了闪存...... :S
采纳答案by Matt Bradley
You answered the question yourself. Have some kind of loading screen that hides the page until all of the jQuery is run.
你自己回答了这个问题。使用某种加载屏幕来隐藏页面，直到所有 jQuery 运行完毕。
Try something like the following.
尝试类似以下内容。
This goes at the top of your page:
这在您的页面顶部：
<div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;">Loading...</div>
Here's your jQuery:
这是你的jQuery：
$(document).ready( function() {
/*
* ... all of your jQuery ...
*/
// At the bottom of your jQuery code, put this:
$('#loadingMask').fadeOut();
});
回答by SomeShinyObject
Wrap all of your jQuery that you want "preloaded" into this :
将您想要“预加载”的所有 jQuery 包装成这样：
$(window).load(function() {
//Your jQuery here
});
or alternatively, not all of your jQuery code inside of that wrapper. Rather, put your jQuery DOM changes into a
或者，并非所有 jQuery 代码都包含在该包装器中。相反，将您的 jQuery DOM 更改放入一个
$(document).ready(function(){
//jQuery
}))
and then have a wrapper for all your site content.
然后为您的所有网站内容提供一个包装器。
<div id="everything-wrapper">
<!-- put your body here -->
</div>
and set the display to none in your CSS
并在你的 CSS 中将 display 设置为 none
#everything-wrapper {
display : none;
}
and then with the window load like earlier
然后像之前一样加载窗口
$(window).load(function() {
$("#everything-wrapper").show();
// or
$("#everything-wrapper").fadeIn("fast");
// to be fancy with it
});
回答by matt
I was having a similar issue with an artifact popping up briefly during page loads in IE8. The solution I used was to change the visibility of the container to hidden at line 1 of the css. Then showed the element at the end of the jquery file. If the css and jquery start arguing, the element isn't shown until the argument is resolved.
我遇到了类似的问题，在 IE8 中加载页面期间会短暂弹出一个工件。我使用的解决方案是将容器的可见性更改为隐藏在 css 的第 1 行。然后在 jquery 文件的末尾显示元素。如果 css 和 jquery 开始争论，则在解决参数之前不会显示元素。
回答by rlemon
I would have a overlay as part of your static CSS and HTML, then when JQuery loads via
我会将覆盖作为静态 CSS 和 HTML 的一部分，然后当 JQuery 通过
$(document).ready()you can hide the overlay
$(document).ready()你可以隐藏覆盖
回答by Alex
The answer by Christopher is most likely the way FilamentGroup do it. You can have javascript "preloaded", it loads inline with the rest of the page, and due to it usually being larger than the rest of the page takes longer to download. You can't make javascript load first, that's not the way it works.
Christopher 的答案很可能就是 FilamentGroup 的做法。您可以“预加载”javascript，它会与页面的其余部分一起加载，并且由于它通常比页面的其余部分大，因此需要更长的时间来下载。您不能先加载 javascript，这不是它的工作方式。
However, the principle to make it work is to "hide" your page from view in CSS (or with inline styles as the CSS will still have to load) then once everything is ready in javascript show it all again. If you notice there is a gap between the page displaying (nothing) and the javascript loading showing on FilamentGroup. That is because they hide the page, the javascript loader loads, then once the rest of the javascript has finished it hides the loader and shows the page.
但是，使其工作的原则是在 CSS 中“隐藏”您的页面（或使用内联样式，因为 CSS 仍然需要加载）然后一旦一切准备就绪，在 javascript 中再次显示。如果您注意到页面显示（无）和 FilamentGroup 上显示的 javascript 加载之间存在差距。那是因为它们隐藏了页面，javascript 加载器加载，然后一旦 javascript 的其余部分完成，它就会隐藏加载器并显示页面。
回答by frosty
Dude, I did you up a sample. I hope you likes. I use something like this on my own site. http://jsfiddle.net/jMVVf/
伙计，我给你做了一个样本。我希望你喜欢。我在我自己的网站上使用类似的东西。 http://jsfiddle.net/jMVVf/
