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

发布于 2024-11-27 11:27:13 字数 259 浏览 1 评论 0原文

我有一个加载在文档头中的 JavaScript，需要隐藏文档正文，直到加载所有页面内容。我已经尝试过：

$(document.body).hide();

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

我所能控制的就是 javascript 中的内容。我无法操作静态 html 页面，因为脚本是作为插件开发的。

原文

I have a javascript that is loaded in the document head that needs to hide the document body until all page contents have loaded. I have tried:

$(document.body).hide();

But there still appears to be a flicker in some browsers. I am using the latest jQuery library (1.6.2). Firing the event on domready does hide the document body, but causing a flicker as well.

All that I can control is what is in the javascript. I cannot manipulate the static html pages as the script is being developed as a plugin.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千寻… 2024-12-04 11:27:13

在页面加载之前隐藏内容是一种反可用性功能。内容的某些部分可能需要一段时间才能加载，而您的访问者则看不到任何内容。浏览器在收到内容时呈现内容，因为用户一开始就选择了它作为首选模型。

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

Hiding content until the page is loaded is an anti-usability feature. Some parts of the content may take while to load, meanwhile your visitors see nothing. Browsers render content as it is received because users chose that as the preferred model in the very begining.

If you persist with this approach, you must hide the content using script. Otherwise, users with javascript disabled or not available, or where the script fails to execute correctly, will never see the content.

The simplest way to hide content using script is to use document.write to create a style sheet, then remove it to show the content:

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
}

回复收藏 0 原文

无人问我粥可暖 2024-12-04 11:27:13

最好的方法是将所有内容放入容器 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();

The best way to do this is to put all content in a container div and have a style sheet that hides it by default. You can then show the content once everything is loaded. There is no way to run Javascript before the default page content renders so the only way to start out hidden is with a statically defined CSS rule:

HTML:

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

CSS in a stylesheet with the page to make it initially not visible:

#container {display: none;}

And, then you can do whatever you want with javascript and when you're done building the page, you do this to make it visible:

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

or in jQuery:

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

回复收藏 0 原文

腻橙味 2024-12-04 11:27:13

您可以使用 CSS 和 JS：

在文档顶部、标题下方使用 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>

享受:)

You can use CSS and JS:

In the top of your document, below the TITLE use CSS:

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

And after this use JS to restore the visibility:

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

Enjoy :)

回复收藏 0 原文

~没有更多了~

关于作者

罗罗贝儿

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

╰ゝ天使的微笑

少女净妖师

朱洁

觉浅

滥情空心

hl1314520

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

╰ゝ天使的微笑

少女净妖师

朱洁

觉浅

滥情空心

hl1314520

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。