有没有办法强制浏览器在页面的所有内容（例如图像、脚本、css 等）都完全加载后才显示页面？
加载完成后显示 HTML 页面
IT技术
javascript
html
browser
2021-03-15 18:35:28
5个回答
最简单的方法是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 */
}
（请注意，position: fixed在 IE6 中不起作用 - 我知道在该浏览器中没有确定的方法）
像这样添加 DIV（直接在开始body标签之后）：
<div style="display: none" id="hideAll"> </div>
之后直接显示 DIV：
<script type="text/javascript">
document.getElementById("hideAll").style.display = "block";
</script>
并隐藏它onload：
window.onload = function()
{ document.getElementById("hideAll").style.display = "none"; }
或使用 jQuery
$(window).load(function() { document.getElementById("hideAll").style.display = "none"; });
这种方法的优点是它也适用于关闭 JavaScript 的客户端。它不应该引起任何闪烁或其他副作用，但没有对其进行测试，我不能完全保证它适用于所有浏览器。
在页面上放置一个叠加层
#loading-mask {
background-color: white;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
然后在window.onload处理程序中删除该元素或隐藏它
window.onload=function() {
document.getElementById('loading-mask').style.display='none';
}
当然，如果您使用的是库，则应该使用您的 javascript 库（jquery、prototype ..）特定的加载处理程序。
最初隐藏主体，然后在加载后用 jQuery 显示它。
body {
display: none;
}
$(function () {
$('body').show();
}); // end ready
此外，最好$('body').show();将最后一行作为您的最后一个和主要 .js 文件中的最后一行。
你也可以这样做......这只会在 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>
尝试为此使用javascript！似乎它是最好和最简单的方法来做到这一点。只有在 HTML 页面完全加载后，您才会获得内置的 funcn 来执行 html 代码。
或者您可以使用基于状态的编程，其中事件发生在浏览器的特定状态。