1

タブ付きのページがいくつかあります。これらのタブをクリックするたびに、html のレンダリングに時間がかかります。私がアップロードしたこのビデオを見て、私の言いたいことを理解してください: http://screencast.com/t/9cgWWAQD2Qff

この動画でわかるように、タブをクリックすると0.5秒ほどリンクが青く表示されます。見ないようにしたいです。

ページですべての準備が整ったときに、レンダリングされた html のみを表示する方法はありますか? それとも似たようなもの？

これが私のコードです：

@using WebUI.Areas.Admin.ViewModels
@using WebUI.App_LocalResources

@{
    Html.EnableClientValidation(true);
    Html.EnableUnobtrusiveJavaScript(true);

    var controller = ViewContext.RouteData.Values["controller"].ToString().ToLower();
    var tabNumber = 0;    
    var tabItems = new List<TabItem>() {
        new TabItem{ Index = 0, Id = "reporting", DisplayText = UserResource.Reporting, Controller = "Reporting", Href = Url.Content("~/Admin/Reporting/Index") },
        new TabItem{ Index = 1, Id = "user", DisplayText = UserResource.Users, Controller = "User", Href = Url.Content("~/Admin/User/Index") },
        new TabItem{ Index = 2, Id = "materialpacking", DisplayText = UserResource.Packings, Controller =  "MaterialPacking", Href = Url.Content("~/Admin/MaterialPacking/Index") },
        new TabItem{ Index = 3, Id = "stop", DisplayText = UserResource.Stops, Controller =  "Stop", Href = Url.Content("~/Admin/Stop/Index") },
        new TabItem{ Index = 4, Id = "schedule", DisplayText = UserResource.Schedule, Controller =  "Schedule", Href = Url.Content("~/Admin/Schedule/Index") },
        new TabItem{ Index = 5, Id = "vehicle", DisplayText = UserResource.Vehicles, Controller =  "Vehicle", Href = Url.Content("~/Admin/Vehicle/Index") },
        new TabItem{ Index = 6, Id = "company", DisplayText = UserResource.Companies, Controller =  "Company", Href = Url.Content("~/Admin/Company/Index") },
        new TabItem{ Index = 7, Id = "budgettypesite", DisplayText = UserResource.BudgetTypeSite, Controller =  "BudgetTypeSite", Href = Url.Content("~/Admin/BudgetTypeSite/Index") },
        new TabItem{ Index = 8, Id = "contact", DisplayText = UserResource.Contacts, Controller =  "Contact", Href = Url.Content("~/Admin/Contact/Index") }
    };

    var selected = tabItems.SingleOrDefault(x => x.Controller.Equals(controller, StringComparison.InvariantCultureIgnoreCase));
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" content="" />
        <title>Admin | @ViewBag.Title</title>

        <link type="text/css" rel="stylesheet" href="@Url.Content("~/Areas/Admin/Content/Site.Admin.css")" />    
        <link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/bootstrap.min.css")" />
        <link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" />

        <script type="text/javascript" src="@Url.Content("~/Scripts/jQuery/jquery-1.7.1.js")"> </script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/jQuery/jquery.unobtrusive-ajax.min.js")"> </script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/jQuery/jquery.validate.min.js")"> </script>    
        <script type="text/javascript" src="@Url.Content("~/Scripts/jQuery/jquery.validate.unobtrusive.min.js")"> </script>   
        <script type="text/javascript" src="@Url.Content("~/Scripts/jQuery/jquery-ui-1.8.17.js")"> </script>        
        <script type="text/javascript" src="@Url.Content("~/Scripts/jQuery/jquery.ui.datepicker-fr.js")"> </script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/jQuery/jquery.ui.datepicker-nl-BE.js")"> </script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/jQuery/jquery.maskedinput-1.3.min.js")"> </script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/jQuery/bootstrap-modal.js")"> </script>

        <script type="text/javascript" src="@Url.Content("~/Scripts/DialogForm.js")"> </script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/main.js")"> </script>

        <!-- Pulled from http://code.google.com/p/html5shiv/ -->
        <!--[if lt IE 9]>
            <script src="//html5shim.googlecode.com/svn/trunk/html5.js"> </script>
        <![endif]-->

        <script type="text/javascript">
            $(document).ready(function () {
                $("#tabs").tabs();
                $(".tabLink").click(function () {
                    document.location = $(this).attr("data-url") + $(this).attr("href");
                });            
                $("#tabs").tabs('option', 'selected', @(selected == null ? 0 : selected.Index) );
            });
        </script>       

    </head>

    <body>    

        <header>
            <div class="float-left">
                <div id="logo">
                    <img src="@Url.Content("~/Areas/Admin/Content/pictures/admin-logo.png")" alt="" />
                </div>
            </div>

            <div class="float-right">     
                <div class="backToClient">
                    @Html.ActionLink("Retour à l'interface client", "DetectExistingRequest", "General", new { area = "" }, new { @class = "btn" })
                </div>
                <div class="menuLanguage">                        
                    @Html.Partial("_LanguageBarPartial")
                </div>                 
            </div>
        </header>

        <div id="wrapper">
            <div id="tabs">
                <ul> 
                    @foreach (TabItem item in tabItems)
                    {
                        <li><a class="tabLink" href="#@item.Id" data-url="@item.Href">@item.DisplayText</a></li>                                            
                    }
                </ul>    
                @foreach (TabItem item in tabItems)
                {
                    <div id="@item.Id">
                        @{ tabNumber++; }
                        @if (controller.Equals(item.Controller)) { break; }
                    </div>                        
                }
                @RenderBody()
            </div>
            @foreach (TabItem item in tabItems.Skip(tabNumber))
            {                
                <div id="@item.Id"></div>                                        
            }
        </div>

    </body>
</html>
4

2 に答える 2

2

Since you're already using jquery, you could set the body style as:

<body style="display:none">

OR in your css:

body { display: none; }

and then add the following javascript:

$(document).ready( function() {
$('body').show()
})

This hides the page until all the elements are loaded and then displays them. Keep in mind that if you have a heavy site this may cause slower load times.

Jquery references:

js 以外のサポート:

JavaScript を有効にしていないユーザーの問題を解決するには <noscript>、頭の中でタグを使用して元の読み込みスタイルに戻すことができます。

<noscript>
  <style>
    body { display: block !important; }
  </style>
</noscript>
于 2012-04-27T07:09:05.387 に答える
0

jQueryを使用して、ドキュメントの準備ができ<body style="display:none">たら、本文を表示に変更できます。

于 2012-04-27T07:04:15.797 に答える