Общая функция, отображающая значок загрузки по любому данному div

Question

Можно передать div-id функции (show), а затем показать загружаемое изображение, которое охватывает весь div &, а затем передать то же самое div-id другой функции (скрыть) и скрыть загрузочное изображение, показанное над div. Я пытаюсь создать решение generic здесь & не ищу что-то вроде этого.

jQuery.ajaxSetup({ 
    beforeSend: function() { 
    $('#loaderDiv').show(); 
    }, 
    complete: function(){ 
    $('#loaderDiv').hide(); 
    }, 
    success: function() {} 
}); 

Я хочу показать один раз значок загрузки для каждого div. Я не хочу показывать только один большой div, который охватывает всю страницу. Пожалуйста помоги.

Answer 1

Используя настройку, заданную в $ .ajax (url, [settings]), вы можете изменить расположение загрузочного div.

$.ajaxSetup({ 
    beforeSend: function(xhr, settings) { 
     var $target = $(settings.targetSelector); 
     var $loading = $('#loaderDiv'); 
     $loading.css($target.position()); 
     $loading.width($target.width()); 
     $loading.show(); 
    }, 
    complete: function() { 
     $('#loaderDiv').hide(); 
    } 
}); 

//then later in a button click or whatever 
$.ajax('URL', { 
    targetSelector: "#DIV_TO_OVERLAY" 
}); 

https://jsfiddle.net/x3f8ntdv/