在任何给定 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/