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 集合中的每个元素触发一次，并依次设置给每个 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
    ...

});