Question

I used a flowplayer tutorial to make some ajax tabbed content but the it doesn’t use any kind of a loading indication in between content load. How can I add that to this script? 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

You can try add an element with a loading gif before call the method .load() and it will be removed when .load() inserts the html result.

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