如何将加载微调器添加到现有jQuery AJAX click函数

Question

我正在尝试使单击功能淡出内容，淡入加载微调器，淡出加载微调器，然后淡入新内容，同时使用history.pushstate更改我的网址。 除了显示我的Spinner 之外，以上所有内容均已实现 。

jQuery('.jax a, .page-navigation a').live('click', function(event) {
        var url = jQuery(this).attr('href'),
            title = jQuery(this).attr('title');
        jQuery('#main-content').fadeOut('4000', function(){
        jQuery('#main-content').load(url+' #main-content', function(){
        jQuery('#main-content').fadeIn('4000');
        document.title = title;
        history.pushState({url:url,title:title}, title, url );
    });
});
        return false;
});

我的spinner .spinner设置为display：none ，但我无法使其与当前代码一起使用。 任何帮助，将不胜感激。

Answer 1

请查看以下代码是否有效：

jQuery('.jax a, .page-navigation a').live('click', function(event) {
    var url = jQuery(this).attr('href'),
    title = jQuery(this).attr('title');
    jQuery('#main-content').fadeOut('4000', function(){
        // Loading will start, show spinner
        jQuery('.spinner').show();
        jQuery('#main-content').load(url+' #main-content', function(){
            // Loading is over, hide spinner
            jQuery('.spinner').hide();
            jQuery('#main-content').fadeIn('4000');
            document.title = title;
            history.pushState({url:url,title:title}, title, url );
        });
    });
    return false;
});

Answer 2

您可以通过添加以下内容来减少隐藏/显示代码：

$(document).bind({
   ajaxStart: function(){
         $("#main-content").hide();
         $(".spinner").show(); 
   },
   ajaxStop: function(){
         $("#main-content").show();
         $(".spinner").hide();
   }
});