简体   繁体   English

在JavaScript中隐藏/显示div

[英]Hide/Show div in JavaScript

Hello all i was trying to hide/show a loading div but theres the problem: After the page loads the div appears again...Heres the code i'm using 您好,所有我试图隐藏/显示加载div的问题,但是存在问题:页面加载后,div再次出现...这里我正在使用的代码

 <div id="LoadContent" style="visibility: visible">
            Please wait while we check our databases....
            <br/>
            <img src="images/ajax-loader.gif" id="LoadImg">
        </div>

document.getElementById('LoadContent').style.visibility = 'hidden';

add your javascript to <body onload=""> , that way it will hide your div when the page has finished rendering. 将您的javascript添加到<body onload=""> ,这样,当页面渲染完成后,它将隐藏div。

css takes prescedence over javascript during rendering time, or rerender time. 在渲染或重新渲染期间,css优先于javascript。

There is no onload event for divs, only certain tags . div没有onload事件, 只有某些标签

However, that doesn't mean you're out of luck. 但是,这并不意味着您不走运。 Why is this particular div taking longer to load than the rest of your html? 为什么这个特定的div需要比其他html更长的加载时间?

For example, if you have large images inside of it, then you could have onload events for these, and show the div when they're all finished loading. 例如,如果其中有大图像,则可以为它们设置onload事件,并在它们全部完成加载时显示div。

You should revert visibility to display and use block/none. 您应该还原可见性以显示和使用块/无。

If you follow my steps (later on..) then you will need to get the jquery libraries (add them to your header) for example: 如果遵循我的步骤(稍后),那么您将需要获取jquery库(将它们添加到标头中),例如:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js" type="text/javascript"></script>

On the other hand it would be a lot less coding to use jquery: 另一方面,使用jquery会减少很多编码:

<script type="text/javascript">
function hidebox(){
    $("#LoadContent").toggle();
}
</script>

Your body tag should be like this: 您的身体标签应如下所示:

<body onload="hidebox()">

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM