Question

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

我该如何解决这个问题？

没有必要，但下面是我的代码（css和导航菜单）：

<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

菜单

<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>

Answer 1

这被称为FOUC或“无格式内容的Flash”。通常，在DOM加载后在网页上调用脚本时会发生这种情况。如果您有一个javascript或某种类型的脚本向您的菜单添加类/ ID，您将获得一个FOUC，直到添加了类。要避免这种情况，请在不使用动态生成的类的情况下定位菜单，或手动添加类并使用脚本覆盖它们。

还有一点需要注意，CSS会在渲染之前加载。因此，如果您看到FOUC，则要么是异步加载CSS，要么在渲染开始后更新选择器。

希望这有帮助！

Answer 2

您可以立即隐藏它，一旦整个页面被加载，您应该显示它将属性Visible="false"添加到您的asp:Menu标记中然后在页面中添加一个简单的脚本：

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

您的剪辑代码必须是：

<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"; //or other display options if needed
        // jQuery ver: $("NavigationMenuID").show();
        }
</script>

Answer 3

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

  $(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);            
 });

Answer 4

把你的CSS放在头脑中
将您的JavaScript链接放在最终<body>标记

导航菜单CSS加载缓慢，导致它垂直对齐几秒钟？

4 个答案: