showing loading gif file while page gets loaded using jquery

Question

hi guys,

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"+ $objThis.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

Answer 1

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