JavaScript - 启动时隐藏Div(加载)

Question

我的php页面中有一个div,它使用jQuery在页面加载后隐藏它.但有没有办法从加载一开始就隐藏它？

我问的原因是因为短暂的一秒,您可以在页面加载时看到div,然后在页面完全加载时隐藏.

它看起来不专业.

只是想知道是否有办法解决这个问题？

谢谢

Answer 1

使用css样式隐藏div.

#selector { display: none; }

或者像下面一样使用它,

CSS:

.hidden { display: none; }

HTML

<div id="blah" class="hidden"><!-- div content --></div>

在jQuery中

 $(function () {
     $('#blah').removeClass('hidden');
 });

Answer 2

除了CSS解决方案.最快的方法是立即用脚本隐藏它.

<div id="hideme"></div>
<script type="text/javascript">
    $("#hideme").hide();
</script>

在这种情况下,我会推荐Vega的CSS解决方案.但是如果你需要更复杂的东西(比如动画),你可以使用这种方法.

这有一些复杂性(见下面的评论).如果你希望这段脚本能够尽可能快地运行,你就不能使用jQuery,只使用本机JS并推迟加载所有其他脚本.

Answer 3

我遇到了同样的问题.

使用CSS隐藏不是最好的解决方案,因为有时你想要没有JS的用户可以看到div ..最干净的解决方案是用JQuery隐藏div.但是div显示大约0.5秒,如果div位于页面顶部,则会出现问题.

在这些情况下,我使用了一个没有JQuery的中间解决方案.这个工作并立即:

<script>document.write('<style>.js_hidden { display: none; }</style>');</script>

<div class="js_hidden">This div will be hidden for JS users, and visible for non JS users.</div>

当然,您仍然可以在div上添加所需的所有效果,例如JQuery toggle().并且你将获得最好的行为(imho):