jquery - 阻止 UI 旋转预加载器

Question

我想知道是否有人可以深入了解如何使用 jQuery Block UI 插件添加旋转预加载器(如苹果使用)。预加载器必须旋转，直到 AJAX 内容加载。 Block UI 可以做到这一点吗？

任何方向都会有帮助，谢谢!

Answer 1

从网络上找到一个好的动画颤动图像，如下所示:

设置一个隐藏的 throbber div 来显示它。

<div id="throbber" style="display:none;">
    <img src="/img/busy.gif" />
</div>

告诉 blockUI 使用该 div 作为消息。

$.blockUI({ message: $('#throbber') });

ajax 调用完成后，杀死 throbber:

$.ajax({
    complete: function(data) {
        // kill the block on either success or error
        $.unblockUI();
    }
});

您还可以使用 ajax 成功/错误回调来根据每个结果以不同方式控制 blockUI，而不是完成。