タブ付きAjaxスクリプトにローディングを追加するには

Question

フロープレイヤーのチュートリアルを使用していくつかのAjaxタブ付きコンテンツを作成しましたが、コンテンツ読み込みの間にどのような種類の読み込み指示も使用しません。このスクリプトにどのように追加できますか？ http://pastebin.com/PebcJspn

<script> 
    $(function() { 

     $(".feed-tabs ul").tabs("div.feeds > div", { 

      effect: 'fade', 

      onBeforeClick: function(event, i) { 

       // get the pane to be opened 
       var pane = this.getPanes().eq(i); 

       // only load once. remove the if (...){ } clause if you want the page to be loaded every time 
       if (pane.is(":empty")) { 

        // load it with a page specified in the tab's href attribute 
        pane.load(this.getTabs().eq(i).attr("href")); 
       } 

      } 
     }); 

    }); 
</script> 

Answer 1

あなたが前にメソッドを呼び出す​​負荷GIFに要素を追加してみてくださいと​​は、HTMLの結果を挿入したとき、それは削除されます。

<script> 
    $(function() { 
    $(".feed-tabs ul").tabs("div.feeds > div", { 
     effect: 'fade', 
     onBeforeClick: function(event, i) { 
     // get the pane to be opened 
     var pane = this.getPanes().eq(i); 

     // only load once. remove the if (...){ } clause if you want the page to be  loaded every time 
     if (pane.is(":empty")) { 
      //add this 
      pane.append("<img src='http://mentalized.net/activity-indicators/indicators/ilcu/roller.gif'/>") 
      // load it with a page specified in the tab's href attribute 
      pane.load(this.getTabs().eq(i).attr("href")); 
     } 
     } 
    }); 
    }); 
</script>