Как создать предварительный загрузчик ajax

Question

Я знаю, что это немного вопрос о нобе, но я просто брошу его.

$('#loading') 
.ajaxStart(function() { 
    $(this).show(); 
}).ajaxStop(function() { 
    $(this).hide(); 
}) 

У меня есть этот код в моем .js, и есть

<div id="loading"><img></div> 

в моем HTML.

и у меня есть слой, который загружает ajax при нажатии на кнопку.

jQuery(document.body).on('click', '.open_list', function (e) { 
e.preventDefault(); 
jQuery(".ajax_list").fadeOut(function() { 

jQuery('.list').addClass('slideIn'); 
    var $ajaxList = jQuery(this); 

    $ajaxList.load("http://lifeto.dothome.co.kr/xe/free .ajax_contents", function() { 
     $ajaxList.fadeIn(); 
    }); 
}); 
}); 

вопрос, как я загрузить загрузчик DIV (#loading) внутри .list, когда он загрузку данных?

Я только новичок в jquery и ajax, поэтому я понятия не имею, к чему относятся $ (this) и .ajaxStart.

вот фактический адрес моего веб-сайта. http://lifeto.dothome.co.kr/xe/page_FIsv96

Answer 1

HTML

<a href="#" id="verification" >test</a> 
<img src="example_preloader.gif" id="ajaxPreloader" style="display:none" /> 

JS

$('#verification').click(function() { 
    $('#ajaxPreloader').toggle(); 
    $.ajax({ 
     type  : "POST", 
     url  : "example url", 
     data  : {'exampleData': ''}, 
     success : function(msg) { 
     $('#ajaxPreloader').text(''); 
     location.reload(); 
     }, 
     error: function(error) { 
     $('#ajaxPreloader').text(''); 
     } 
    }); 
    }); 

Answer 2

Я думаю, что это должно работы-

$(document) 
.ajaxStart(function() { 
    $('#loading').show(); 
}).ajaxStop(function() { 
    $('#loading').hide(); 
})