在jquery中，“忙碌等待”动画的最佳方式是“位置可配置”吗？ （即显示行动的位置）

Question

我打算按照这篇文章中的说明忙碌等待微调器：How to show loading spinner in jQuery? - 因为它是最干净，最容易实现的：

 $('#loadingDiv')
        .hide()  // hide it initially
        .ajaxStart(function() {
            $(this).show();
        })
        .ajaxStop(function() {
            $(this).hide();
        })
    ;

并将其与来自http://www.ajaxload.info/

的动画结合起来

我的页面中有多个“视图”，即我的页面的不同部分可以使用相应的ajax调用进行更新/修改。

我希望将#loadingDiv“定位”在“行动所在”的位置附近。我应该怎么做呢？

几乎没有想到的事情：

1. 在整个地方都有多个div并将它们隐藏起来并根据相应的操作显示每个元素 - 看起来天真和浪费
2. 空<span></span>来'保持'#loadingDiv - 在该范围内发生事件时显示它。我不知道怎么做...
3. 别的什么？

基本上如何最好地接近位置繁忙的等待/信号而不是只有一个全局的？或者是首选的单一全局选项，即，要有一个“固定”div，隐藏显示在每个活动的页面顶部/中心？

只是想知道你们大多数人使用过哪个选项/首选来解决这个问题，你们怎么建议我去做...

Answer 1

有些事情需要考虑：

如果用户在加载请求时与页面的其他部分进行交互，是否会导致问题？

  

在这种情况下，使用透明覆盖的灯箱阻止整个UI。

这些操作是否小而且与应用程序的其余部分无关？

  

使用本地定位微调器。如果是按钮，请从例如更改按钮的内容。使用微调器“保存行”到“保存...”。

如果请求很重要但您想让用户搞砸，并且GUI很复杂

  

您只能覆盖部分屏幕。 http://sfiddle.net/Lv9y5/39/

本地更新，非阻止方式

  

使用jQuery.position从头开始创建Spinner对象。它应该有一个.show（node）和.hide（）方法，也许是.setMessage（txt）;   传递给show方法的DOM引用是用户单击的元素。通过引用，您可以使用jQuery .position（）来确定加载div的绝对位置。加载div应放在BODY元素之后。