在 JavaScript 中隐藏/显示 div答案

【问题标题】：Hide/Show div in JavaScript在 JavaScript 中隐藏/显示 div
【发布时间】：2012-05-31 21:55:30
【问题描述】：

大家好，我试图隐藏/显示加载 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';

【问题讨论】：

判断页面是否加载的代码在哪里？你在使用任何 AJAX 吗？我要立即更改的一件事是不要使用 visibility 属性，而是使用带有块/无的 display 属性。
您是否尝试过将 javascript 作为页面的最后内容 - 这样大部分页面元素都会被加载。您也可以使用 jQuery $(document).ready(...) 函数来实现这一点

标签： javascript html

【解决方案1】：

将你的javascript添加到<body onload="">，这样当页面完成渲染时它会隐藏你的div。

css 在渲染时间或重新渲染时间优先于 javascript。

【讨论】：

【解决方案2】：

div 没有 onload 事件，only certain tags。

但是，这并不意味着您不走运。为什么这个特定的 div 的加载时间比你的 html 的其余部分要长？

例如，如果您在其中有大图像，那么您可以为这些设置 onload 事件，并在它们全部加载完成时显示 div。

【讨论】：

问题是，当页面加载时（按下按钮后）div隐藏没有错误，但是当页面完成加载时，div又出现了
@JoãoMarceloBrito 是“提交”类型的按钮吗？如果是这样，您的 div 会暂时隐藏，但是整个页面正在从服务器重新加载。发生这种情况时，您的所有 html 都会被重置，包括 div 的“可见性”属性。不确定这是否是您的问题，也许您可以编辑您的问题以包含按钮及其关联的 javascript？

【解决方案3】：

您应该恢复可见性以显示和使用块/无。

如果您按照我的步骤操作（稍后...），那么您将需要获取 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>

另一方面，使用 jquery 会少很多编码：

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

你的body标签应该是这样的：

<body onload="hidebox()">

【讨论】：