块UI旋转预加载器 [英] Block UI spinning preloader

问题描述

我想知道是否有人可以使用jQuery Block UI插件添加旋转预加载器(如苹果使用的插件).预加载器必须旋转直到加载AJAX内容.使用Block UI可以做到吗?

I was wondering if anyone could shed insight as to how I could add a spinning preloader (like apple uses) using the jQuery Block UI plugin. The preloader would have to spin until the AJAX content loads. Is this possible with Block UI?

任何方向都会有所帮助，谢谢！

Any direction would be helpful, thanks!

推荐答案

在网络上查找良好的动画跳动图像，如下所示:

Find a good animated throbber image off the web, like this:

设置一个隐藏的rob动div来显示它.

Set up a hidden throbber div to show it.

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

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

Tell blockUI to use that div as the message.

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

ajax调用完成后，杀死throbber:

After the ajax call completes, kill the throbber:

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

您还可以使用ajax成功/错误回调对每个结果(而不是完成结果)进行不同的控制blockUI.

You can also use ajax success / error callbacks to control blockUI differently on each outcome, instead of complete.

这篇关于块UI旋转预加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！