Question

好的，所以我一直在玩jQuery一个多月了，并了解一些基本概念，但请在新手的背景下回复！

我的导航栏使用jQuery执行以下操作：

问题：当页面打开时，应该隐藏的div在jQuery隐藏之前会显示一小段时间。

jQuery位于外部.js文件中，并链接在每个PHP页面的底部，就在关闭正文标记的上方。

jQuery有点像这样：

$(document).ready(function () {
    $(#example1).hide();
    $(#example2).hide();

    Interactive code here. etc etc
};

关于如何在加载页面之前完全执行jQuery的任何想法？

Answer 1

您可以通过使用CSS隐藏特定元素来解决此问题。

Answer 2

使用CSS隐藏元素：

display: none;

$（document）.ready（）侦听器意味着代码将在页面加载后启动。

Answer 3

您应该使用CSS来隐藏元素：

#example1, #example2 {
    display: none;
}

您可以通过JQuery将这些元素从ready function中删除来立即隐藏这些元素。

$('#example1, #example2').hide();

$(document).ready(function () {
    ...
});

Answer 4

您应该使用CSS隐藏元素而不是.hide。也许只是做着

#example1,
#example2 {
  display: none;
}

Answer 5

所有$('#example2').hide()都会将元素上的CSS设置为display: none;。阻止元素显示该瞬间的最佳方法是将它们隐藏在CSS样式中。你可以做到

#example1,#example2 { display: none; }

在你的CSS中

。 CSS被解析并且比JavaScript更快生效，因为它旨在影响文档的显示方式，而JavaScript的目的更多是为了操纵HTML文档的功能。

Answer 6

如上所述，但我想在这里更详细地解释，我使用CSS，但我使用CSS类而不是将其分配给单个元素/ ID。

例如，在我的CSS文件中：

.ninja {
    display:none;
}

然后将该类应用于应该以隐藏方式开始的元素。

然后在你的js中根据需要随时添加/删除课程。

例如，在jQuery中：

$('someselector').removeClass('ninja');

Answer 7

虽然这里有几个答案，但它们都是通过css隐藏你的元素（如果你想要显示js是否关闭，你可能不想要这些）

为此，我有一个简单的解决方法 - 在<body>执行

之后

<script type="text/javascript">document.write('<div class="js">');</script>

然后在你的结束身体标签之前，关闭div：

<script type="text/javascript">document.write('</div>');</script>

这样你就可以为你的css添加样式，只会在文档加载时影响js，而不必担心dom在尝试隐藏它们之前是否加载了它们，例如：

.js #example1 {display:none;}