showing loading gif file while page gets loaded using jquery

Question

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.

$(d         


        

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