1

这是我的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() 之前运行？

4

2 回答 2

4

假设您通过隐藏主体或容器元素来解决此问题。这不会奏效，原因如下：

在文档（大部分）加载之后但在隐藏文档之前会发生什么？

没错，尽管您尽了最大努力，但该文档可能会在此期间显示。

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

<!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()真的是倒退的——当时似乎是个好主意，但实际上只是一个错误.)

于 2013-05-19T04:55:39.677 回答
3

你不能hide()。document相反，尝试隐藏页面上的主容器元素；或隐藏body例如$('body').hide()也可能有效。

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

于 2013-05-19T04:46:31.380 回答