如何在使用jQuery加载页面之前隐藏HTML元素

我有一些显示或隐藏div的JQuery代码。

$("div#extraControls").show(); // OR .hide() 

我最初希望div不可见所以我用过：

 $(document).ready(function() { $("div#extraControls").hide(); }); 

但是，在浏览器上，内容在消失之前加载一秒钟，这不是我想要的。

如何在页面加载之前设置隐藏元素，同时保持显示的能力用脚本动态隐藏它？

Answer 1

 div.hidden { display: none } 
 
 $(document).ready(function() { $("div#extraControls").removeClass("hidden"); }); 

Answer 2

做一个css课

 .hidden { display: none; } 

将此添加到加载页面时不希望看到的任何元素。 然后使用$("div#extraControls").show(); 再次显示它。

Answer 3

在CSS中：

 #extraControls { display: none; } 

或者在HTML中：

Answer 4

 #toggleMe //Keep this in your .css file { display:none; visibility:inherit; background-color:#d2d8c9; } Expand Me ///this way u can make a link to act like a button too 
 //this will be hidden during the page load //your elements 
 ///if you decide to make it display on a click, follow below:  //make sure u include jquery.js file in ur project  ///Now for every alternate click, it shows and hides, but during page load; its hidden. //Hope this helps you guys ... 

Answer 5

使用CSS3，您可以通过利用:only-child选择器实际隐藏内容，直到页面加载为止。

以下是如何执行此操作的演示 。 基本思想是加载CSS时会在加载该节点及其子节点时向DOM添加单个节点。 此外，一旦第二个子节点被添加到给定父节点，则:only-child选择器规则被破坏。 我们匹配此选择器并设置display: none以隐藏给定节点。

        
 
 
Content Hidden
  
 
 
   

Answer 6

你可以做的是在文档的末尾插入一个内联script标记，或者在id为“extraControls”的div之后立即插入。 应该比一点火更快。

 
i want to be invisible!
  

当然你也可以做这个服务器端，但也许有一个很好的理由你不想这样做（比如，如果浏览器不支持javascript，可以看到控件）。

Answer 7

加载页面加载javascript函数的最佳方法是

 $(window).bind("load", function() { // code here }); 

在你的情况下

 div.hidden { display: none } 
 
 $(window).bind("load", function() { $("div#extraControls").removeClass("hidden"); });