javascript - カスタムタブ付きのスピナーを表示

Question

$('#widget .tabs li a').click(function (e) {
        $('#widget .tabs li').removeClass('ui-tabs-active');
        $(this).parent().addClass('ui-tabs-active');
        $('.group-tabContent').hide();
        var url = $(this).attr('href');
        $('.group-tabContent').empty().load(url);
        $('.group-tabContent').show();
        return false;
    });
});

..うまく機能しますが、ページの読み込み中にスピナーを表示したいのですが、どこに挿入すればよいですか？

Answer 1

ファクトリ関数の先頭に、次のようなものを追加します 。「ajax-loader-reference」は、ローダーへのクラス/ID/要素参照です
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$("ajax-loader-reference").animate({});
});

Answer 2

新しいコンテンツの読み込み中に何かを行うには、行$('.group-tabContent').empty().load(url);を更新し、完全な関数ハンドラーを含めます (jQuery リファレンスを参照してください: http://api.jquery.com/load/ 「完全な」コールバックが提供されている場合、post-処理と HTML 挿入が実行されました。コールバックは jQuery コレクション内の各要素に対して 1 回発生し、これが各 DOM 要素に順番に設定されます。 ):

// add show spinner code here
...

// make request for content
$('.group-tabContent').empty().load(url, function(response, status, xhr){

    // done loading content, now hide spinner
    ...

});