내 탭이있는 아약스 스크립트에 로딩을 추가하는 방법

Question

플로우 플레이어 튜토리얼을 사용하여 일부 아약스 탭 콘텐츠를 만들었지 만 콘텐츠로드 사이에 어떤 종류의 로딩 표시도 사용하지 않습니다. 이 스크립트에 어떻게 추가 할 수 있습니까? 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

당신은 이전 방법 .load()를 호출 로딩 GIF와 요소를 추가하려고 할 수 .load()는 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>