How do I hide an HTML element before the page load

2020-02-16 08:05发布

站内问答 / jQuery
601 7 6

I have some JQuery code that shows or hides a div.

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

I initially want the div to be not visible so I used:

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

However, on the browser, the content loads visible for a second before disappearing, which is not what I want.

How do I set the hide the element before the page loads whilst keeping the ability to show hide it dynamically with a script?

标签： jquery html
举报
7条回答
贼婆χ
2楼-- · 2020-02-16 08:18

The best way to load javascript function over page is loaded, is

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

In your case

div.hidden
{
   display: none
}

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

$(window).bind("load", function() {
   $("div#extraControls").removeClass("hidden");
});
查看更多
0人赞 添加讨论(0) 举报
可以哭但决不认输i
3楼-- · 2020-02-16 08:22

What you could do is insert a inline script tag at the end of the document, or immediately after the div with id "extraControls". Should be fire a little sooner than.

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

Of course you could do this server-side as well, but maybe there's a good reason you don't want to do that (like, have the controls visible if the browser does NOT support javascript).

查看更多
0人赞 添加讨论(0) 举报
forever°为你锁心
4楼-- · 2020-02-16 08:23 
#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 ...
查看更多
0人赞 添加讨论(0) 举报
Evening l夕情丶
5楼-- · 2020-02-16 08:37

Make a css class

.hidden {
display: none;
}

Add this to any element you don't want to be visible when loading the page. Then use $("div#extraControls").show(); to display it again.

查看更多
0人赞 添加讨论(0) 举报
够拽才男人
6楼-- · 2020-02-16 08:38 
div.hidden
{
   display: none
}

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

$(document).ready(function() {
    $("div#extraControls").removeClass("hidden");
});
查看更多
0人赞 添加讨论(0) 举报
何必那么认真
7楼-- · 2020-02-16 08:41

With CSS3 you can actually hide content until a page loads by taking advantage of the :only-child selector.

Here is a demonstration of how to do this. The basic idea is that CSS while loading will add a single node to the DOM while loading that node and its child nodes. Further, once a second child is added to the given parent node the :only-child selector rule is broken. We match against this selector and set display: none to hide the given node.

<!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>
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)