3

我的 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>
4

4 回答 4

4

您可以立即隐藏它，一旦加载了整个页面，您应该再次显示它。Visible="false"因此，为元素添加一个属性asp:Menu，然后在页面中添加一个简单的脚本以在页面完全加载时显示它：

<script type='javascript'>
window.onload = function(){
    document.getElementById("NavigationMenuID").style.display = "block";
}
</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";
        }
</script>
于 2013-07-22T05:41:38.683 回答
3

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

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

希望这可以帮助！

于 2013-07-18T16:09:57.893 回答
1

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

  $(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);            
 });
于 2013-07-22T03:00:43.527 回答
0

  • 把你的CSS放在头上

  • 将您的 JavaScript 链接放在结束<body>标记之前

于 2013-07-19T14:24:43.330 回答