Adding a pre-loader on click .load() function jquery

Question

I am having a problem using .load() in jquery

This is my current code

jQuery(document).on('click','#Pagination a', function(e){
    e.preventDefault();
    var link = jQuery(this).attr('href');
    var nxtPage =  jQuery(this).attr('href');
    window.history.pushState('obj', 'newtitle', nxtPage);
    jQuery('.preloadswitch').load(link+' .the-categories').fadeIn('slow');      
});

This actually works, however I need for it to fadeIn + pre-loader when getting the content then disappears if the content is visible

Can I make this a ajax where it has a "beforeSend" or "success" function? Thanks

This is not working also

jQuery('.preloadswitch').load(link+'.the-categories',function(response,status,xhr){
    if(status == 'sucess'){ 
        jQuery('.preloadswitch').removeClass('addpreloader');
    }
});

Answer 1

试试这个：

jQuery('.preloadswitch')
    .fadeIn('slow')                // Fades it in.
    .addClass('addpreloader')      // Adds the pre-loader class.
    // Loads the content.
    .load(link+' .the-categories', function(){
        // Removes the pre-loader class once AJAX is completed.
        $(this).removeClass('addpreloader');
    } );