如何仅在页面完全呈现后才显示 div答案

【问题标题】：How to show a div only after the page render completely如何仅在页面完全呈现后才显示 div
【发布时间】：2019-09-09 03:01:24
【问题描述】：

我有一个 php 呈现的菜单。此菜单是我的页面呈现时出现的第一个项目。问题是菜单看起来像一个简单的文本列表，就像一个破碎的页面，所以在页面渲染完成后，菜单就会出现。

我已经尝试过使用淡入淡出，延迟，但没有任何效果。就我而言，如何仅在页面加载完成后才显示此菜单？ 我正在使用原型和 jquery。不冲突怎么办？

html的结构很简单：

   <div id="menu">
      <nav id="mobile-menu" >
          <ul>
              <li>item</li>
              <li>item</li>
          </ul>
       </nav>
    </div>

页面渲染前的菜单：

【问题讨论】：

如果它是由 PHP 渲染的，它将在浏览器收到请求之前加载。我相信你没有正确解释这一点。你的意思是 javascript 不是 PHP？
PHP 渲染的菜单。它~是一个magento商店，但是菜单是js库mmenu

标签： javascript html css

【解决方案1】：

如果您尝试过淡入淡出，我假设您已经知道这一点。

#menu {
  display: none;
}

过去我在 jQuery 实现方面遇到了一些问题，只是使用了纯 Javascript。你能把它放在你的 HTML 页面的底部吗？

这是一种 hack，但这取决于您的用例。

<script>
document.getElementById("menu").style.display = "block";
</script>

【讨论】：

谢谢你，但这个脚本不是很好用。文本在完全渲染之前仍然出现

【解决方案2】：

    <html>
    <head>
        <script type="text/javascript" 
        src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'> 
        </script>
    <style>
        #menu{
            display: none;
        }
    </style>
</head>
<body>
<div id="menu">
      <nav id="mobile-menu" >
          <ul>
              <li>item</li>
              <li>item</li>
          </ul>
       </nav>
    </div>
</body>
 <script>
  $(document).ready(function(){
    $('#menu').css("display", "block");
  })
  </script>
</html>

【讨论】：

它不工作。我用的是原型，有冲突吗？该脚本未设置 CSS

【解决方案3】：

如果您使用的是 jquery，下面是您需要显示菜单的地方。 $( document ).ready 在 html 渲染后触发

$( document ).ready(function() {
//change menu style to display
});

【讨论】：

谢谢！但这里不起作用。我如何写它没有冲突？
必须有一个事件可以加载您的页面内容，您可以在该事件结束时显示菜单。否则简单的事情是你可以给页面内容一些页边距。
喜欢 margin-top:50px;

【解决方案4】：

谢谢你们！我使用你的代码没有冲突！

<script type="text/javascript">
   var j = jQuery.noConflict();
   j( document ).ready(function( $ ) {
        j('.hide-menu').css("display", "block");
    });    
 </script>

【讨论】：