在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 元素之后。