Как добавить ... загрузку в мой ajax-скрипт с вкладками

Question

Я использовал учебник flowplayer, чтобы создать некоторый контент с вкладками 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 перед вызовом метода .load(), и он будет удален, когда .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>