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

由于您已经在使用 jquery，您可以将正文样式设置为：

<body style="display:none">

或者在你的 CSS 中：

body { display: none; }

然后添加以下javascript：

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

这会隐藏页面，直到所有元素都被加载然后显示它们。请记住，如果您的网站很重，这可能会导致加载时间变慢。

jQuery 参考资料：

非 js 支持：

要解决未启用 javascript 的用户可能遇到的任何问题，您可以使用 <noscript>头脑中的标签恢复到原始加载样式：

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

您可以放置<body style="display:none">​​，然后使用 jQuery，在文档准备好时，将正文更改为可见。

于 2012-04-27T07:04:15.797 回答