是否有一种方法可以强制浏览器在所有页面内容完全加载(例如图片、脚本、CSS等)后才显示页面?
是否有一种方法可以强制浏览器在所有页面内容完全加载(例如图片、脚本、CSS等)后才显示页面?
最简单的方法是在 body
中添加一个具有以下 CSS 的 div
:
#hideAll
{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: white;
z-index: 99; /* Higher than anything else in the document */
}
(请注意,在IE6中position: fixed
不起作用 - 我不知道如何在该浏览器中保证100%生效)
像这样添加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的客户端。它不应该引起任何闪烁或其他副作用,但由于没有测试过,我不能完全保证每个浏览器都能正常工作。
.hideAll
更正为#hideAll
。 - aularon#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';
}
初始时隐藏正文,等待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页面完全加载后才能执行HTML代码。
否则,你可以使用基于状态的编程,在浏览器的特定状态下触发事件。