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

我希望有一个忙碌的等待微调器，如本文所示： 如何在jQuery中显示加载微调器？ – 因为它是最干净，最容易实现的： 

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

并将其与来自http://www.ajaxload.info/的动画结合起来

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

我想把这个#loadingDiv “定位”在“行动所在”的位置附近，可以这么说。 我应该怎么做呢？

想到的事情很少：

  1. 在整个地方都有多个div并隐藏它们并按照相应的动作显示每个元素 – 看起来很幼稚和浪费
  2. 有一个空的来“保持” #loadingDiv – 在该范围内发生某些事情时显示它。 我不知道怎么做…
  3. 别的什么？

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

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

有一些事情需要考虑：

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

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

这些行为是否微小，与应用程序的其余部分无关？

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

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

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

本地更新，非阻塞方式

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

Interesting Posts