隐藏的div - 通过样式显示减少延迟无+ javascript

我通常在我的页面上使用隐藏的div，直到他们需要用javascript隐藏。我以前也用javascript做了初始隐藏，但现在转移到使用css隐藏它们以确保隐藏发生（js在浏览器中禁用）。 js隐藏也存在延迟问题（等待js加载）。隐藏的div - 通过样式显示减少延迟无+ javascript

我的问题是，与CSS，仍然有一些延迟，所以我最终包括像下面的标记样式，我有点讨厌这样做，让我觉得我做错了什么..

<div style="display:none;"> 
    content 
</div>

你们多久这样做？有没有办法让我的CSS或JS以某种方式加载之前的其余标记？

在此先感谢

来源

2009-10-06 Chris

您是否将链接指向'head'元素中的外部CSS文件？ – 2009-10-06 06:01:16

你使用jQuery吗？ – halocursed 2009-10-06 06:01:46

包括为内嵌样式块的CSS页面的顶部：

<style> 
    .hidden: { display: none; } 
</style>

然后用所需的类注释您的DIV：

<div class="hidden"> ... </div>

这种做法的结果是，到显示元素，您不需要将显示设置为block，您可以使用JavaScript添加/删除元素中的类。这样做会更好，因为不是每个元素都需要display = block（表格和内联元素具有不同的显示模式）。

尽管另一张海报说，这不是一个坏习惯。您应该将CSS分为表象和功能标记 - 功能一个控制这样的逻辑事情是否或不是被显示，表象一个刚刚决定如何表现出来。将函数式CSS内联以避免页面跳跃是没有问题的。

来源

2009-10-06 06:13:34 levik

我更倾向于这个答案。我确实使用了class =“hidden”的想法，并通过添加/删除js类来做后来的隐藏/取消隐藏。只是没有想到为那个小块添加风格，傻了我。看起来像保持标记尽可能干净的最佳方式。来自其他人对此方法的评论？ :) – Chris 2009-10-06 06:36:27

我会建议将您的显示：无规则样式表的顶部，这样它的第一个或第几解析的，虽然说实话这真的取决于有多少HTTP请求/您拥有的媒体资源。

您可以尝试在结束标签前抛出js，并确保css位于顶部，隐藏这些元素的css样式表是链接的第一个。

来源

2009-10-06 06:01:25

取决于浏览器。 Opera，WebKit和Konqueror并行加载CSS和JavaScript（然而，在应用之前，所有的CSS都被加载）。

display:none是最好的解决方案，但是你可以使用直接加载页面的inline-css（就像在你的描述中一样），如果你想要格外谨慎，不过它的坏习惯。

来源

2009-10-06 06:06:22 3zzy

我可能会敲定这一点，但在很多应用程序，当我想避免这种延迟我使用内联脚本标记内容后，像这样：

<div id="hidden-div"> 
    content 
</div> 
<script type="text/javascript"> 
    $('#hidden-div').hide(); 
</script>

或者如果你不使用jQuery：

<div id="hidden-div"> 
    content 
</div> 
<script type="text/javascript"> 
    document.getElementById('hidden-div').style.display = 'none'; 
</script>

起初，这看起来笨重;但是，也有几个原因，我采取这种做法：

的隐藏是立即（不等待整个DOM加载）禁用JavaScript意志
人们仍然看到的内容，而如果我们用CSS隐藏它，则非JS用户无法再次使其可见。

希望这会有所帮助！

来源

2009-10-06 06:17:32

隐藏的div - 通过样式显示减少延迟无+ javascript

回答

相关问题