在页面加载时隐藏文档正文

时间:2011-08-02 22:01:30

标签: javascript jquery dom

我在文档头中加载了一个javascript,需要隐藏文档正文,直到所有页面内容都加载完毕。我试过了:

$(document.body).hide();

但在某些浏览器中似乎仍有闪烁现象。我正在使用最新的jQuery库(1.6.2)。在domready上触发事件会隐藏文档正文,但也会导致闪烁。

我能控​​制的就是javascript中的内容。我不能操纵静态html页面,因为脚本是作为插件开发的。

3 个答案:

答案 0 :(得分:7)

隐藏内容直到加载页面是一种反可用性功能。内容的某些部分可能需要一段时间才能加载,同时您的访问者什么也看不到。浏览器会在收到内容时呈现内容,因为用户在最开始时选择了内容作为首选模型。

如果您坚持使用此方法,则必须使用脚本隐藏内容。否则,禁用或无法使用javascript或脚本无法正确执行的用户将永远不会看到内容。

使用脚本隐藏内容的最简单方法是使用 document.write 创建样式表,然后将其删除以显示内容:

document.write( '<style class="hideStuff" ' +
                'type="text/css">body {display:none;}<\/style>');

window.onload = function() {
  setTimeout(
    function(){
      var s, styles = document.getElementsByTagName('style');
      var i = styles.length;
      while (i--) {
        s = styles[i];
        if (s.className == 'hideStuff') {
          s.parentNode.removeChild(s);
          return;
        }
      }
    }, 1000); // debug pause
}

答案 1 :(得分:6)

执行此操作的最佳方法是将所有内容放在容器div中,并使用默认情况下隐藏它的样式表。然后,您可以在加载所有内容后显示内容。在默认页面内容呈现之前无法运行Javascript,因此开始隐藏的唯一方法是使用静态定义的CSS规则:

HTML:

<body>
    <div id="container">
        all dynamic page content goes here
    </div>
</body>

样式表中的CSS,其页面最初不可见:

#container {display: none;}

然后,你可以用javascript做任何你想做的事情,当你完成构建页面时,你这样做是为了让它可见:

document.getElementById("container").style.display = "block";

或在jQuery中:

$("#container").show();

答案 2 :(得分:0)

您可以使用CSS和JS:

在文档顶部,TITLE下方使用CSS:

<style type="text/css">body {visibility: hidden;}</style>

在此之后使用JS来恢复可见性:

<script type="text/JavaScript">
document.write('<style type="text/css">body {visibility: visible;}</style>');
</script>

享受:)