Question

我有一个很大的调查，我通过将它安排到各个部分并使用手风琴菜单翻阅每个部分，使jQuery更有用。

麻烦的是，当$(document).ready()触发并将所有内容压缩成手风琴菜单时，会有明显的快照。也就是说，在$(document).ready()之前，您可以看到整个调查。

我考虑过将#surveyForm设置为css中的display: none;，将#surveyForm.active设置为display: block;，但这会产生新问题：

没有启用javascript的浏览器永远不会看到＃surveyForm.active，因此他们将无法使用该调查。

有什么想法吗？

干杯

-Iain

Answer 1

我没有试过这个，但也许您可以将内容包装在<noscript>标签中。禁用Javascript的用户将始终看到内容。那些使用Javascript的人将看不到内容。然后使用JQuery删除<noscript>标记，从而使内容对使用Javascript的人可见。

修改

以下示例几乎可行。我打算删除<noscript>标签，同时保留其内容。但是，代码最终会转义HTML。这个想法有效，但我不确定如何正确实施 - 也许其他人可以对它有所了解：

<noscript> <p>Display me!</p> </noscript> <script type="text/javascript" language="javascript"> $(document).ready(function() { $('noscript').contents().unwrap(); }); </script>

这是我想要的：

<p>Display me!</p>

这是我实际得到的：

<p>Display me!</p>

编辑2：

经过多一点调查后，unwrap()方法可以正确处理非<noscript>标记：例如，它适用于<div>的内容。我不确定这里的解决方案是什么。这可能与浏览器解释<noscript>的方式有关。

Answer 2

它不像Javascript那样干净且不引人注目，但你可以直接在你的手风琴内容之后添加一个Javascript片段来初始化手风琴并隐藏需要隐藏的部分。净效果应该完全消除“快照”并保持表格可以访问非JS客户端。

Answer 3

如果您想在启用JS时轻松管理非JavaScript浏览器/用户而不使用 snap ，请在页面的头节点内尝试以下代码段：

document.documentElement.className = 'has-js'
// or any other class name, use += and append it if you already have a class on your *html* tag

首先在非js场景的CSS编写中，然后将display设置为none，或者通过为js相关的css选择器添加.has-js前缀来隐藏任何适合你的方式。

我可能会因为将javascript放在头脑中而被忽略但请记住，从性能角度来看（Yahoo等人）只需要javascript 文件（外部）尽可能晚地加载。

javascript标记本身不会使你的页面加载更长时间，除非它在解析和执行时会阻止渲染，但在这种情况下我们想要它，因为你之前需要.has-js类渲染开始避免闪烁。

Answer 4

我会坚持使用css display:none解决方案。要解决no javascript问题，您可以考虑使用此问题：

<script type="text/javascript">
   $(document).ready(function(){
      // fade in?
   });
</script>
<noscript>
   <div>foobar!</div>
</noscript>

Answer 5

这是我用于此类情况的渐进增强solution。

Answer 6

您可以尝试将所有内容隐藏在jquery块的顶部，然后在完成所有内容后再次显示它吗？

$(document).ready
(
    function ()
    {
        $("#surveyForm").hide();
        ... MAGIC CONDENSING
        $("#surveyForm").show();
    }
);

这可能会减少您所看到的“快照”的影响。

Answer 7

我能想到的解决方法是：

使用javascript加载初始隐藏的CSS文件。
将CSS放在一个noscript块中，在任何地方将其设置为false后，将可见性设置为true。

两者都应该有效我想虽然我没有机会正确测试它们。

Answer 8

您可以放置一个内联Javascript语句，该语句将在呈现后立即隐藏该元素。

基本上...

<head>部分内的脚本已加载
呈现HTML
$(document).ready()开火

所以要解决这个问题，你可以简单地做到这一点

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#survey").accordion();
  }
</head>
<body>
    <div id="survey">....</div>
    <script type="text/javascript">
      $("#survey").hide();
    </script>
</body>

隐藏元素的可访问方式，直到jQuery $（document）.ready（）？

8 个答案: