MVC3 .net issue to show loading image when page loads

Question

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).

Links:

http://testserver/sitename --> this link uses default route where the image is not loading.

http://testserver/sitename/ --> this is a hyper link on the webpage defined as below where the image is loading as expected. @Html.ActionLink("menu_item_1", "Index", "Home", null, new {@class = "menu"})

Both links are calling the same controller & redirecting to index view page.

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
        );

    }