mercredi 15 février 2017

MVC3 .net issue to show loading image when page loads

I'm pretty new to the MVC3 .net programming & recently in one of my internal projects I'm trying to implement a functinality where to display a loading image while the page is being loaded. (using jquery function calls.)

Issue: If i browse the default URL as we define in the route mapping. The image is not getting loaded but i can see all the styles getting populated on the page. But if i navigate to same page using the hyper link defined on the webpage the image is getting loaded as expected. I'm not sure what I'm missing here. It is same case for jquery load & jquery-ajax request/response functions (default navigation is not working while the hyperlink navigation is working).

Code:

            <style type="text/css">
            #loader {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: url('content/themes/base/images/preloader_8.gif') 50% 50% no-repeat rgb(249,249,249);
            opacity: .8;
        }
        </style>

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

            <script type="text/javascript">
                $(window).load(function () {
                    $("#loader").fadeOut("slow");
                });
                $(document).ready(function () {
                    $(document).ajaxStart(function () {
                        $("#loader").show();
                    }).ajaxStop(function () {
                        $("#loader").hide();
                    });
                });
        </script>      

And I have following tag defined in the body of index/home page,

<div id="loader"></div>

route mapping in my config file: (I don't think there is an issue here, because i can see the transparency style but not the defined image(preloader_8.gif).)

    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            "Default", // Route name
            "{controller}/{action}/", // URL with parameters
            new { controller = "Home", action = "Index"} // Parameter defaults
        );

    }

Aucun commentaire:

Enregistrer un commentaire