隐藏框在页面加载时保持隐藏状态

Hidden boxes remain hidden on page load

本文关键字：隐藏 状态 加载      更新时间：2023-09-26

我的页面加载html大约需要一秒钟。有几个隐藏的div被设置为显示:最初没有，然后在正常使用期间通过jquery toggle访问。然而，当页面加载时，这些隐藏的div闪烁大约半秒。如果页面是硬刷新的，加载大约需要3-4秒，那么这些div将显示大约1 - 2秒。我想知道有没有办法防止这种情况发生。我不想让他们闪一秒，如果看起来很糟糕。页面的简化html是这样的。

<!DOCTYPE html>
<html>  
<head>      
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />       
    <title>Site - Home</title>      
    <link rel="stylesheet" type="text/css" href="style.css" />              
    <!--JQuery-->       
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>              
    <script type='text/javascript' src='javascript/popup.min.js'></script>  
</head>     
<body>      
    <a href="#" id="new-post">New Post</a>
    <!--Popup container-->
    <div id="new-post-box" class="popup" style="width:500px;">      
        blah            
    </div>
    <script type="text/javascript">/*popup function*/</script>              
</body>
</html>

我不知道这段代码是否必要，但是可以阻止显示blah的div出现在页面加载上吗?同样，它最初设置为display:none但我猜css加载的时间比html

要晚一些

确保display:none属性在文件的css中，而不是在document.ready()或其他脚本中。这应该能缓解问题。

在上面的情况下(我猜你想隐藏class='popup')，所以在CSS

中添加以下内容
.popup{
  display:none;
}
相关文章：