Home/ Questions/Q 7855727
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T20:28:19+00:00

I have some pages with tabs. Whenever I click on these tabs, the html

  • 0

I have some pages with tabs. Whenever I click on these tabs, the html takes somes time to be rendered. Take a look at this video I uploaded to understand what I mean: http://screencast.com/t/9cgWWAQD2Qff

As you can see on this video, when a tab is clicked, we see links in blue for about 0.5 secs.I would like to avoid to see it.

Is there a way to only show rendered html when everything is ready on the page? Or something similar?

Here is my code:

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    Non-js Support:

    To solve any issues you may have with users who do not have javascript enabled you can use the
    <noscript> tags in your head to revert to the original style of loading:

    <noscript>
  <style>
    body { display: block !important; }
  </style>
</noscript>
    • 0