使用 jquery 加载屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12994600/
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
Loading screen using jquery
提问by Vinod CG
Possible Duplicate:
How to show Page Loading image/div/text until the page has finished loading/rendering
I want to display a full page loading screen using jquery. I never used loading before so i am confused. all i want to do is hide other elements untill all scripts css images and content are loaded. How do i do it?
我想使用 jquery 显示一个完整的页面加载屏幕。我以前从未使用过加载，所以我很困惑。我想要做的就是隐藏其他元素，直到加载所有脚本 css 图像和内容。我该怎么做？
回答by Louis Loudog Trottier
Very simple:
很简单：
- Create a div to fill the screen, you can put the loading image or text in there
- At the end of you html file, or by using jquery $(document).ready(function(){ ... }); remove the divs.
- you mentioned all 'IMAGES'... might need a little extra for that.
- 创建一个 div 来填满屏幕，你可以把加载的图片或文字放在那里
- 在 html 文件的末尾，或使用 jquery $(document).ready(function(){ ... }); 删除div。
- 你提到了所有的“图像”......可能需要一些额外的东西。
SO, in your html, make an fixed or absolute div with 100% width and height.. (i suggest turning the overflow to hidden so you don't have scroll bars (width +padding + margin = >100%)
所以，在你的 html 中，制作一个 100% 宽度和高度的固定或绝对 div ..（我建议将溢出设置为隐藏，这样你就没有滚动条（宽度 + 填充 + 边距 = >100%）
<div id='loading_wrap' style='position:fixed; height:100%; width:100%; overflow:hidden; top:0; left:0;'>Loading, please wait.</div>
Either you can put it in the head as this:
或者你可以把它放在头上：
<script type='text'javascript'>
$(document).ready(function(){
$('#loading_wrap').remove();
});
</script>
Or add this at the end of your html page, (right before the closing html tag):
或者在你的 html 页面的末尾添加这个，（就在关闭的 html 标签之前）：
<script type="text/javascript">$('#loading_wrap').remove();</script>
This might not wait for the pictures to be loaded, for this you would be a loop that check if the pic are loaded before triggering the .remove();
这可能不会等待图片加载，为此您将是一个循环，在触发 .remove() 之前检查图片是否已加载；
