试图隐藏文档，直到用JavaScript更新它

Trying to hide the document until it's updated with JavaScript

本文关键字：JavaScript 更新 隐藏 文档      更新时间：2023-09-26

这是我的ready处理:

$(document).ready(function() {
     $(document).hide();
     $('.foo').each(function(elem, i) {
          $(elem).text('So long and thanks for all the fish');
     });     
     $(document).show();
}};

我想做的是完全隐藏文档，直到一切都准备好了，但似乎show()函数不等待元素迭代。

顺便说一下，我尝试将show()和hide()更改为css('display', 'hide')和css('display', 'block')，但仍然可以，文本在您的眼睛中发生变化。

如何确保在调用show()之前所有的代码都运行?

假设您通过隐藏body或容器元素来解决这个问题。这行不通，原因如下:

在文档(大部分)加载之后，但在隐藏文档之前会发生什么?

没错，尽管你尽了最大的努力，文档还是可能在这段时间内显示出来。

所以你可以做的是使用一个CSS类来隐藏，比如说，没有任何JavaScript干预的body。例如:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
        body.hide { display: none; }
    </style>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script>
        $(document).ready( function() {
            $('.foo').each(function( i, elem ) {
                $(elem).text( 'So long and thanks for all the fish' );
            });
            $('body').removeClass( 'hide' );
        });
    </script>
</head>
<body class="hide">
    <div class="foo"></div>
</body>
</html>

当然，这意味着如果JavaScript被禁用，你的文档将是不可见的。如果你想有一个非javascript的回退怎么办?在这种情况下，你可以这样做。我们将隐藏html元素而不是body，因为这样我们知道代码将在head中工作(此时body元素可能还不存在)，并且只有在启用JavaScript时才隐藏它:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
        html.hide { display: none; }
    </style>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script>
        $('html').addClass( 'hide' );
        $(document).ready( function() {
            $('.foo').each(function( i, elem ) {
                $(elem).text( 'So long and thanks for all the fish' );
            });
            $('html').removeClass( 'hide' );
        });
    </script>
</head>
<body>
    <div class="foo">
        This content is displayed if JavaScript is disabled.
    </div>
</body>
</html>

现在您有了一个非JavaScript的回退，但是当启用JavaScript时，由于添加了hide类的代码，文档仍然会立即隐藏。

还请注意，您在$().each()回调中颠倒了参数。(有趣的是，您使用的顺序更有意义，并且确实是较新的本机.forEach()函数使用的顺序。

$().each()中的顺序确实是向后的-当时看起来像是一个好主意，但实际上只是一个错误。

您不能hide() document。相反，试着隐藏页面上的主容器元素;或者隐藏body，例如$('body').hide()也可以。

顺便说一句:display属性应该是none。hide不是一个有效值

相关文章：