Asp.net 导航菜单CSS加载缓慢，导致其垂直对齐几秒钟？

我的ASP.NET项目的site.master文件中有一个常规导航菜单。我将我的应用程序保存在服务器中，但有时当我启动应用程序或进行回发时，我的导航菜单会垂直对齐几秒钟，当页面完全加载时，它又是水平的

我怎样才能解决这个问题

不需要，但以下是我的代码（css和导航菜单）：

菜单呢

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
                    IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Administration" Value="Administration">
                            <asp:MenuItem NavigateUrl="~/_Admin/AdminPanel.aspx" Text="Admin Panel" />
                            <asp:MenuItem NavigateUrl="~/_Admin/RoleManager.aspx" Text="Role Manager" Value="RoleManager" />
                        </asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
                    </Items>
                </asp:Menu>

这称为FOUC或“未格式化内容的闪存”。通常，在加载DOM后在网页上调用脚本时会发生这种情况。如果您有一个javascript或某种脚本将类/ID添加到菜单中，那么在添加类之前，您将得到一个FOUC。为了避免这种情况，可以在不使用动态生成的类的情况下以菜单为目标，或者手动添加类并用脚本覆盖它们

另一件需要注意的事情是，CSS在渲染之前加载。因此，如果您看到一个FOUC，您要么异步加载CSS，要么在渲染开始后更新选择器

希望这有帮助

• 把你的CSS放在头上

• 将JavaScript链接放在末尾
  标记之前

---

加载页面时的第一件事可能是：

  $(document).ready(function(){
    // First line in the script.
     $('#NavigationMenuClientID').hide();

     //Other page scripts..
     .
     .
     .
     .
     .
     .
     // check navigation menu styles / scripts are loaded.
     $('#NavigationMenuClientID').show();
     // else use SetTimeout(function(){$('#NavigationMenuClientID').hide();},10);            
 });

---

您可以立即隐藏它，一旦加载整个页面，您应该再次显示它。因此，向

asp:Menu

元素添加一个属性

Visible=“false”

，然后向页面添加一个简单脚本，在页面完全加载时显示：

<script type='javascript'>
window.onload = function(){
    document.getElementById("NavigationMenuID").style.display = "block";
}
</script>

window.onload=函数（）{
document.getElementById（“NavigationMenuID”）.style.display=“block”；
}

最后一段：

<asp:Menu ID="NavigationMenu" Visible="false" runat="server" CssClass="menu" EnableViewState="false"
                    IncludeStyleBlock="false" Orientation="Horizontal">
    <Items>
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Administration" Value="Administration">
        <asp:MenuItem NavigateUrl="~/_Admin/AdminPanel.aspx" Text="Admin Panel" />
        <asp:MenuItem NavigateUrl="~/_Admin/RoleManager.aspx" Text="Role Manager" Value="RoleManager" />
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
    </Items>
</asp:Menu>
<script type='javascript'>
        window.onload = function(){
            document.getElementById("NavigationMenuID").style.display = "block";
        }
</script>

window.onload=函数（）{
document.getElementById（“NavigationMenuID”）.style.display=“block”；
}

想想看，您创建了一个新的asp.net项目，我没有做任何更改，这就是为什么不需要代码的原因。我的问题与代码无关，而是与速度慢有关。我复制了代码，结果很好。什么用作数据源？DB，XML？很可能是

javascript

仍在加载中，样式尚未应用于该点。查看开发人员工具，您将看到类似于为

javascript

弹出窗口添加的

aria haspopup=“导航菜单：子菜单：3”

。不知道是否可以将asp的

javascript

文件移动到页面底部。查看实际的HTML输出会很有用。看来你在那里有运行条件。因此，请将HTML输出发布到您的问题中。您是否使用自定义字体？比如说，如果您使用的是压缩字体，它可能是在加载元素之后加载的，导致一些菜单项向下移动。-1类

菜单

已经创建，并且存在于

站点.css中，并且这不是
动态生成的类
。
/一旦此页面由
ASP.NET
呈现，ASP.NET手动分配的类，则假定
手动添加类
拒绝/标准ASP.NET标记不需要覆盖-1在文档准备好后隐藏菜单并在同一函数中显示可能无法解决此问题/使用
setTimeout
不是标准解决方案（导致浪费时间）/您还需要显示它而不是再次隐藏它（在最后一行）可能取决于网络速度，这可能会显示闪存。但大多数情况下，这应该是可行的。设置10-50毫秒的超时不会引起太多问题，或者不会造成太大的延迟。将hide（）改为show（）。菜单必须尽快隐藏，并立即显示在窗口中。onload事件（浏览器在加载整个页面后触发此事件）
CSS
已位于
head
中，而不是其他任何位置/此页面中没有显示的
JavaScript
链接当可见=添加false时，getElementById找不到该项，我也尝试使用jquery，但没有成功too@HOY：因此，将
display:none
添加到
menu
类中，或将
document.getElementById（“NavigationMenud”）.style.display=“none”
添加到脚本中，然后删除
visible=false
即可：）
<asp:Menu ID="NavigationMenu" Visible="false" runat="server" CssClass="menu" EnableViewState="false"
                    IncludeStyleBlock="false" Orientation="Horizontal">
    <Items>
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Administration" Value="Administration">
        <asp:MenuItem NavigateUrl="~/_Admin/AdminPanel.aspx" Text="Admin Panel" />
        <asp:MenuItem NavigateUrl="~/_Admin/RoleManager.aspx" Text="Role Manager" Value="RoleManager" />
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
    </Items>
</asp:Menu>
<script type='javascript'>
        window.onload = function(){
            document.getElementById("NavigationMenuID").style.display = "block";
        }
</script>