如何隐藏html，直到它被javascript处理？

Question

我正在使用一些JS代码将我的菜单转换为drilldown menu。

问题是在运行JS之前，你会看到一大堆丑陋的链接。在他们的网站上，把js放在最上面就解决了这个问题。使用yahoo/YSlow的建议，我将JS文件放在底部。

我试着用display:none隐藏菜单，然后使用.show()，.css('display'，'')，.css('display'，'block')的jquery，它们都导致了一个乱七八糟的菜单(我得到了标题，但没有得到标题的背景色或菜单的任何链接)

如何正确地隐藏div/菜单并在渲染后显示它？

Answer 1

我找到了解决方案。我应该在ddMenu代码执行之前使用css隐藏链接，然后使用.show()，而不是在执行之后。ddMenu似乎检查了父母的宽度，并将其隐藏起来，我猜它的值是0。.show()和ddMenu之间的时间足够快，不会显示难看的链接(在我的机器/浏览器上)。大多数时候(页面加载，对JS文件的http请求，JS编译/exec等)链接都是隐藏的，所以看起来很不错。

$(function () {
    $('.menuT1').show(); //do it before not after in this case.
    $('.menuT1 > ul').ddMenu({

Answer 2

在<head>中放置以下内容：

<script>document.documentElement.className = 'js';</script>

现在，它将.js类添加到您的html元素中。这将是javascript在页面上做的第一件事。

在你的CSS中你可以这样写：

.js #菜单{display:无；}

然后：

$(document).ready(function() { 
    $('#menu').css('display','block').fancyMenu();
});

这是一个很好的技术，它允许你使你的页面“逐步增强”，如果你的用户禁用了JavaScript，- she仍然可以看到内容，你也可以将非JS样式与样式分离，这只与你的菜单的JS版本相关，也许是“位置:绝对”之类的。

Answer 3

在您的页面顶部放置：

<script type="text/javascript">
    document.write('<style type="text/css">');
    document.write('#mylinks { display:none; }');
    document.write('</style>');
</script>

在“处理”结束时，调用$('#mylinks').show();

document.write在处理DOM时计算，这意味着在页面首次显示在视口中之前，此动态样式块将在样式规则中注册。

这是工作得很好的一个很好的例子-如果你的用户有JS可用并启用了，你就隐藏链接，直到它们准备好；但如果没有，它们仍然可用，尽管很难看。