Javascript 加载完成后显示 HTML 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3629762/
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
display HTML page after loading complete
提问by Rana
Is there a way to force the browser to display a page only after all of the page's contents are completely loaded (such as images, scripts, css, etc)?
有没有办法强制浏览器仅在页面的所有内容（例如图像、脚本、css 等）都完全加载后才显示页面？
回答by Pekka
The easiest thing to do is putting a divwith the following CSS in the body:
最简单的方法是div在 body 中放入带有以下 CSS 的 a：
#hideAll
{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: white;
z-index: 99; /* Higher than anything else in the document */
}
(Note that position: fixedwon't work in IE6 - I know of no sure-fire way of doing this in that browser)
（请注意，这position: fixed在 IE6 中不起作用 - 我知道在该浏览器中没有确定的方法）
Add the DIV like so (directly after the opening bodytag):
像这样添加 DIV（直接在开始body标签之后）：
<div style="display: none" id="hideAll"> </div>
show the DIV directly after :
之后直接显示 DIV：
<script type="text/javascript">
document.getElementById("hideAll").style.display = "block";
</script>
and hide it onload:
并隐藏它onload：
window.onload = function()
{ document.getElementById("hideAll").style.display = "none"; }
or using jQuery
或使用 jQuery
$(window).load(function() { document.getElementById("hideAll").style.display = "none"; });
this approach has the advantage that it will also work for clients who have JavaScript turned off. It shouldn'tcause any flickering or other side-effects, but not having tested it, I can't entirely guarantee it for every browser out there.
这种方法的优点是它也适用于关闭 JavaScript 的客户端。它不应该引起任何闪烁或其他副作用，但没有对其进行测试，我不能完全保证它适用于所有浏览器。
回答by aularon
put an overlay on the page
在页面上放置一个叠加层
#loading-mask {
background-color: white;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
and then delete that element in a window.onloadhandler or, hide it
然后在window.onload处理程序中删除该元素，或者隐藏它
window.onload=function() {
document.getElementById('loading-mask').style.display='none';
}
Of course you should use your javascript library (jquery,prototype..) specific onload handler if you are using a library.
当然，如果您使用的是库，则应该使用您的 javascript 库（jquery、prototype ..）特定的加载处理程序。
回答by BlekStena
Hide the body initially, and then show it with jQuery after it has loaded.
最初隐藏主体，然后在加载后用 jQuery 显示它。
body {
display: none;
}
$(function () {
$('body').show();
}); // end ready
Also, it would be best to have $('body').show();as the last line in your last and main .js file.
此外，最好$('body').show();将最后一行作为您的最后一个和主要 .js 文件中的最后一行。
回答by JGilmartin
you can also go for this.... this will only show the HTML section once javascript has loaded.
你也可以这样做......这只会在 javascript 加载后显示 HTML 部分。
<!-- Adds the hidden style and removes it when javascript has loaded -->
<style type="text/css">
.hideAll {
visibility:hidden;
}
</style>
<script type="text/javascript">
$(window).load(function () {
$("#tabs").removeClass("hideAll");
});
</script>
<div id="tabs" class="hideAll">
##Content##
</div>
回答by Noddy Cha
try using javascript for this! Seems like its the best and easiest way to do this. You'll get inbuilt funcn to execute a html code only after HTML page loads completely.
尝试为此使用javascript！似乎它是最好和最简单的方法来做到这一点。只有在 HTML 页面完全加载后，您才会获得内置的 funcn 来执行 html 代码。
or else you may use state based programming where an event occurs at a particular state of the browser..
或者您可以使用基于状态的编程，其中事件发生在浏览器的特定状态。
