显示使用jquery加载页面时加载gif文件

Question

我正在使用JQuery。

我正在使用下面的jquery来显示页面片段，它在加载主页面时加载页面片段。

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

现在我想在jquery加载页面时显示loading.gif。下面是从上面jquery采取的代码，我试图加载页面。

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

       }); 

请建议，因为它需要一段时间来加载页面片段。

谢谢。

最好的问候， MS

Answer 1

如果你想要的形象为所有片段可见，而片段加载，只是把它从开始添加的元素：

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

如果你想图片仅在您正在加载时尝试查看的片段可见，请添加图片并将其从开始隐藏：

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