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

我有一些显示或隐藏div的JQuery代码。如何在页面加载之前隐藏HTML元素

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

我最初想的股利是不可见的，所以我用：

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

然而，在浏览器上，消失，这不是我想要的内容前加载的第二可见。

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

来源

2010-06-01 Robert

div.hidden 
{ 
    display: none 
} 

<div id="extraControls" class="hidden"> 
</div> 

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

来源

2010-06-01 15:33:09

+1有一点需要注意的是，如果用户停用JavaScript在浏览器中，整个页面保持隐藏状态。 – 2010-06-01 16:20:26

根据我的经验，一些浏览器不会在使用'display：none'或'opacity：0'隐藏的元素中加载媒体（例如图像）。我建议使用'visibility：hidden'来代替。 – mqchen 2010-06-01 16:45:18

@ mq.chen感谢您的警告，但可见性标记不允许使用.hide（）命令切换内容。 – Robert 2010-06-03 12:09:47

在CSS：

#extraControls { display: none; }

或者在HTML：

<div id="extraControls" style="display: none;"></div>

来源

2010-06-01 15:32:39 Caleb

你可以做的是在文档的末尾插入内嵌script标签，或直接在div后ID为“extraControls”。应该早一点点开火。

<div id="extraControls">i want to be invisible!</div> 
<script type="text/javascript">$("div#extraControls").hide()</script>

当然，你可以做到这一点的服务器端为好，但也许有你不想做一个很好的理由（如，有对照可见，如果浏览器不支持javascript）。

来源

2010-06-01 15:33:56 CharlesLeaf

做一个css类

.hidden { 
display: none; 
}

一下添加到您不希望加载页面时可见的任何元素。然后使用$("div#extraControls").show();再次显示。

来源

2010-06-01 15:37:49 OMGKurtNilsen

#toggleMe //Keep this in your .css file 
{ 
display:none; 
visibility:inherit; 
background-color:#d2d8c9;  
} 


<a href="#" onclick="return false;">Expand Me</a> 
///this way u can make a link to act like a button too 

<div id="toggleMe"> //this will be hidden during the page load 
    //your elements 
</div> 

///if you decide to make it display on a click, follow below: 
<script type="text/javascript" src="jquery.js"> </script> //make sure u include jquery.js file in ur project 
<script type="text/javascript"> 
$(document).ready(function() { 
     $("a").click(function() { 
      $('#toggleMe').toggle("slow"); //Animation effect 
     }); 
    }); 
</script> 

///Now for every alternate click, it shows and hides, but during page load; its hidden. 
//Hope this helps you guys ...

来源

2011-04-11 01:48:15 Ravi

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

Here is a demonstration of how to do this。基本的想法是CSS加载时将在加载该节点及其子节点时将单个节点添加到DOM。此外，一旦第二个孩子被添加到给定父节点，:only-child选择器规则被破坏。我们匹配这个选择器并设置display: none来隐藏给定节点。

<!doctype html> 

<html> 

    <head> 
    <title>Hide content until loaded with CSS</title> 
    <style type="text/css" media="screen"> 
     .hide-single-child > :only-child { 
     display: none; 
     } 
    </style> 
    </head> 

    <body> 
    <div class='hide-single-child'> 
     <div> 
     <h1>Content Hidden</h1> 
     <script> 
      alert('Note that content is hidden until you click "Ok".'); 
     </script> 
     </div> 
     <div></div> 
    </div> 
    </body> 

</html>

来源

2013-12-25 12:58:32

加载了页面加载JavaScript函数的最好方法，是

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

在你的情况

div.hidden 
{ 
    display: none 
} 

<div id="extraControls" class="hidden"> 
</div> 

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

来源

2017-09-14 14:00:34 drafiko

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

回答

相关问题