showing loading gif file while page gets loaded using jquery

I am using JQuery.

I am having below jquery which I am using to show the page fragment, it load the page fragment while the main page is loading.

$(document).ready(function() 
{
        $(".load-fragment").each(function()         
        {          
            var $objThis = $(this);
            var fname = $objThis.attr("href");
            var dynDivID = "divContent"+ $objTh开发者_如何转开发is.attr("id"); 
            var newDiv = $("<div>").attr("id",dynDivID).load(fname + " #tabs-container",function ()
            {               
                $(this).hide(); //Hiding all the newly created DIVs

            });          
            newDiv.addClass('dynDiv');  //Adding CSS to newly created Dynamic Divs 

            $("#column2").append(newDiv); //adding new div in div column2 
        });    

        $(".load-fragment").click(function() 
        {
            // load page on click  
            var $thiz = $(this); //making the current object   
            $thiz.attr("href", "#");         
            $(".tabs-nav li").removeClass("tabs-selected"); //removing the css from the li
            $thiz.parent().addClass("tabs-selected"); //adding the selected class to the parent on click
            $("#tabs-container").hide(); //playing with hide and show
            $('.dynDiv').hide();
            $("#divContent" + $thiz.attr("id")).show();  
        });     
}); 

Now I want to show the loading.gif while jquery loads the page. Below is the code taken from above jquery where I am trying to load page.

var newDiv = $("<div>").attr("id",dynDivID).load(fname + " #tabs-container",function ()
                {               
                    $(this).hide(); //Hiding all the newly created DIVs

                }); 

Please suggest as it is taking sometime to load the page fragment.

Thanks.

Best Regards, MS

If you want the image to be visible for all fragments while the fragment is loading, just add it to the element from start:

var newDiv =
  $("<div>").attr("id",dynDivID)
  .load(fname + " #tabs-container",function () {               
    $(this).hide();
  })
  .addClass('dynDiv')
  .append($('<img/>').attr({ src: 'loading.gif', alt: '' }));
$("#column2").append(newDiv);

If you want the image only to be visible for the fragment that you are trying to view while it's loading, add the image and hide it from start:

var newDiv =
  $("<div>").attr("id",dynDivID)
  .load(fname + " #tabs-container")
  .hide()
  .addClass('dynDiv')
  .append($('<img/>').attr({ src: 'loading.gif', alt: '' }));
$("#column2").append(newDiv);