页面加载时隐藏文档主体

Question

页面加载时隐藏文档主体

3

我有一个JavaScript文件被加载在文档头部，需要在所有页面内容加载完成前隐藏文档主体。我尝试过：

$(document.body).hide();

但是在某些浏览器中仍然会出现闪烁。我使用的是最新的jQuery库（1.6.2）。在domready上触发事件确实会隐藏文档主体，但也会导致闪烁。

我所能控制的只是JavaScript中的内容。我无法操纵静态HTML页面，因为该脚本正在开发为插件。

- aroemen

你可能想看一下这篇文章：http://james.padolsey.com/javascript/avoiding-dom-flickering/。它应该能很好地回答你的问题。 - aefxx

这个也行不通。我只能控制JavaScript中的内容，无法操作静态HTML页面，因为脚本是作为插件开发的。 - aroemen

1

我不喜欢成为那个指出问题似乎有误的人，但在这种情况下，我不得不问：是谁在推动这个需求，为什么？正如@RobG在下面指出的那样，这似乎不太可用。 - David J.

3个回答

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();

- jfriend00

4

这是我的做法。对于那些禁用了 JavaScript 的两个人，在 noscript 中加入一个 container{display: block;}。 - Andy

这个解决方案需要 JS 才能工作，但这是一个处理动态添加内容的解决方案，而且没有 JS 就意味着根本没有动态添加的内容。因此，如果没有 JS，您必须更详细地描述您真正在做什么，以便我们提供任何想法。 - jfriend00

请注意，我不是问题的原始发布者，我只是发表了一条评论。我建议的是，没有js的用户仍然应该能够访问页面。这是常见的网络最佳实践。如何实现取决于部署它的人。在这种情况下，不是我。 - Wesley Murch

@Wesley Murch - 我不想和你辩论这个问题。如果没有JavaScript或者为了让应用程序变得有用而进行的工作超出了商业机会所能承受的范围，那么一些应用程序就没有任何意义或价值。这只是基于特定应用程序的实际决策。如果实际可行并且值得努力，优雅的退化是很好的。我所从事的大部分工作都需要JavaScript，并且这对我服务的受众来说并不是问题。其他应用程序可能处于不同的位置。 - jfriend00

只是一个提示：使用 display:none，浏览器不必在其中渲染您的内容（图像等不会在下面“预加载”）。也许更好的方法是隐藏这些东西（例如使用 jQuery-ui 的 .ui-helper-hidden-accessible）。 - anthony sottile

显示剩余11条评论

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>

祝您愉快 :)

- EasyToUse

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RobG · Accepted Answer

隐藏内容直到页面加载完成是一种反人类的特性。某些内容可能需要一段时间才能加载，而您的访问者在此期间看不到任何内容。浏览器会在接收到内容后渲染它，因为用户选择了这个作为首选模式。

如果您坚持使用这种方法，您必须使用脚本来隐藏内容。否则，禁用或无法使用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
}