montrant le chargement du fichier gif pendant que la page est chargée en utilisant jquery

Question

J'utilise JQuery.

J'ai ci-dessous jquery que j'utilise pour montrer le fragment de la page, il charge le fragment de la page pendant le chargement de la page principale.

$(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(); 
     });  
}); 

Maintenant je veux montrer le chargement.gif tandis que jquery charge la page. Ci-dessous est le code pris de dessus jquery où j'essaye de charger la page.

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

       }); 

Veuillez suggérer car il faut un certain temps pour charger le fragment de page.

Merci.

Cordialement, MS

Answer 1

Si vous voulez que l'image soit visible pour tous les fragments alors que le fragment est en cours de téléchargement, il suffit d'ajouter à l'élément du début:

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

Si vous voulez que image seulement pour être visible pour le fragment que vous essayez de voir pendant le chargement, ajouter l'image et le cacher dès le début:

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