jquery - 阻止 UI 旋转预加载器

Question

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

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

Answer 1

从网络上找到一个好的动态 throbber 图像，如下所示：

设置一个隐藏的 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，而不是完成。

Answer 2

是的，这是可能的。您可以使用此网站以任何您想要的样式在您的网站上添加预加载器...

http://www.preloaders.net/

更新：

有关更多详细信息，请参阅此...

https://stackoverflow.com/questions/6014386/can-anyone-recommend-an-asp-net-busybox-control/6014442#6014442

Answer 3

我已经接受了mujimu提供的答案并修复了一个小问题。我同时发生了“悸动”的多种用法。我发现如果我在现有的解锁之前启动它，它会搞砸并且颤动将停止工作。

这是我的解决方案...

function ReloadDetails(id) {
    $('#' + id + '_Details').block({ message: $('<img src="/images/ajax-loader.gif"/>') });
    $.get(...);
}

这个 ajaxLoaderPath 由我的 cshtml 提供，用于解决虚拟目录的问题。

Answer 4

我讨厌只为一个函数引入另一个库，所以我自己实现了一个，只使用了 jQuery、JavaScript 和 Bootstrap 3。

当我按下一个按钮时，我的代码会在表格中添加一个阻塞模式，进行 ajax 调用，然后等待 0.5 秒，然后解除阻塞，以显示旋转的 gif（因为它可能太快被注意到）。感谢@NaveedButt，我发现 https://icons8.com/preloaders/可以生成一个带有我网站主题颜色的 gif。

颤动模式：（gif水平和垂直居中）

<div id="throbber" class="modal" role="dialog" style="display:none; position:relative; opacity:0.6; background-color:white;">
    <img style="margin: 0 auto;
                position: absolute;
                top: 0; bottom: 0; left:0; right:0;
                margin: auto;
                display: block;
               " src="/static/images/spinning.gif" />
</div>

按钮：

<div class="row">
    <div class="col-lg-12">
        <div class="pull-right">
            <button type="button" id="reload" class="btn btn-primary pull-right-button" style="width: 120px;">Reload</button>
        </div>
    </div>
</div>

JavaScript + jQuery：

function block() {
    var body = $('#panel-body');
    var w = body.css("width");
    var h = body.css("height");
    var trb = $('#throbber');
    var position = body.offset(); // top and left coord, related to document

    trb.css({
        width: w,
        height: h,
        opacity: 0.7,
        position: 'absolute',
        top:        position.top,
        left:       position.left
    });
    trb.show();
}
function unblock() {
    var trb = $('#throbber');
    trb.hide();
}
$(document).ready(function(){
    $('#reload').click(function(){
        block();
        $.ajax({
            type:       "GET",
            url:        "{% url 'scriptsList'%}",
            async:      false
        });
        setTimeout(function(){
            unblock();
        }, 500); //wait 0.5 second to see the spinning gif

    });
});

最终结果是：