Question

我的页面需要大约一秒钟来加载html。有几个隐藏的div设置为显示：none最初，然后在正常使用期间通过jquery切换访问。但是，当页面加载时，那些隐藏的div会闪烁大约半秒钟。如果页面硬刷新并且需要3-4秒加载，那么这些div显示大约一秒或两秒。我想知道是否有办法阻止这种情况。如果看起来很糟糕，我宁愿不让它们闪现第二。这个页面的简化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>

我不知道该代码是否必要，但是可以阻止显示等级的div出现在页面加载上。同样，它设置为显示：none，但我猜css加载的时间比html

晚一点

Answer 1

确保display：none属性位于文件的css中，而不是document.ready（）或其他脚本中。这应该可以缓解这个问题。

在上面的情况下（我猜你要隐藏class ='popup'）所以在CSS中进行以下操作

.popup{
  display:none;
}

隐藏的框仍然隐藏在页面加载上

1 个答案: