javascript - 在任何给定的 div 上显示加载图标的通用函数

Question

是否可以将 div-id 传递给函数(显示)，然后显示加载图像，覆盖整个 div，然后传递相同的 div-id到另一个功能(隐藏)并隐藏显示在 div 上的加载图像。我试图在这里创建一个通用解决方案，而不是寻找这样的东西。

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/