Question

这是我的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（）之前确保所有代码都已运行？

Answer 1

假设您通过隐藏正文或容器元素来解决此问题。这不会成功，这就是原因：

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

没错，尽管你付出了最大努力，但在此期间可能会显示该文件。

所以你可以做的是使用一个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()中的顺序实际上是向后的 - 其中一个似乎是好的当时的想法，但真的只是一个错误。）

Answer 2

您不能hide() document。相反，尝试将主容器元素隐藏在页面上;或隐藏body例如$('body').hide()也可能有用。

暂且不说：display属性应为none。 hide不是有效值。

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

2 个答案: