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

3

これは FOUC または「スタイルのないコンテンツのフラッシュ」と呼ばれます。通常、これは、DOM がロードされた後に Web ページでスクリプトが呼び出されたときに発生します。メニューにクラス/ID を追加する JavaScript または何らかのスクリプトがある場合、クラスが追加されるまで FOUC が発生します。これを回避するには、動的に生成されたクラスを使用せずにメニューをターゲットにするか、クラスを手動で追加してスクリプトで上書きします。

もう 1 つ注意すべき点は、レンダリングが行われる前に 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を頭に入れます

  • <body>終了タグの直前に JavaScript リンクを配置します

于 2013-07-19T14:24:43.330 に答える