如何顯示加載圖像每當標籤頁加載時

Question

如何顯示加載圖像每次加載標籤頁時。

我嘗試使用'select'事件。

$(function() { 
    $('#my-tabs').tabs({ 
     select: function (event, ui) { 
      var idx = $('#my-tabs').tabs('option', 'selected'); 
      $($("#my-tabs div")[idx]).html('<p style="width: 100%; text-align: center;"><img src="Content/Images/ajax-loader.gif" width="220" height="19" /></p>'); 
     } 
    }); 
}); 

如果第二次選中標籤頁，它工作正常，但第一次頁面加載時不起作用。

如何解決這個問題，有什麼想法？

謝謝。

PS。對不起我的英語不好。

Answer 1

您可以在每次發佈ajax請求時顯示加載指示符，如我的博客文章中所述。

http://yekmer.posterous.com/show-loading-spinner-automatically-using-jque

Answer 2

現在正是我想要的工作。我將我的方法與Yekmer Simsek方法相結合。代碼看起來像這樣。

$(function() { 
    $('#my-tabs').tabs({ 
     ajaxOptions: { 
      beforeSend: function() { 
       var idx = $('#my-tabs').tabs('option', 'selected'); 
       $($("#my-tabs div")[idx]).html('<p style="width: 100%; text-align: center;"><img src="Content/Images/ajax-loader.gif" width="220" height="19" /></p>'); 
      }, 
     }, 
     select: function (event, ui) { 
      var idx = $('#my-tabs').tabs('option', 'selected'); 
      $($("#my-tabs div")[idx]).html('<p style="width: 100%; text-align: center;"><img src="Content/Images/ajax-loader.gif" width="220" height="19" /></p>'); 
     } 
    }); 
}); 

但必須將此代碼放置在兩個位置。

var idx = $('#my-tabs').tabs('option', 'selected'); 
$($("#my-tabs div")[idx]).html('<p style="width: 100%; text-align: center;"><img src="Content/Images/ajax-loader.gif" width="220" height="19" /></p>'); 

還有其他方法嗎？