当前位置：文江博客话题详情

阻止 UI 旋转预加载器

发布于 2024-11-07 06:24:07 字数 123 浏览 7 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绝不服输 2024-11-14 06:24:07

从网上找到一张好的动画 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，而不是完成。

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

Set up a hidden throbber div to show it.

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

Tell blockUI to use that div as the message.

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

After the ajax call completes, kill the throbber:

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

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

回复收藏 0 原文

梦言归人 2024-11-14 06:24:07

我已经接受了 mujimu 提供的答案并修复了一个小问题。我同时使用了“throbber”的多种用法。我发现，如果我在现有的一个被解除阻塞之前启动它，它就会变得混乱，并且颤动器将停止工作。

这是我的解决方案...

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

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

I've taken the answer provided by mujimu and fixed a slight problem with it. I have multiple usages of the "throbber" happening simultaneously. What I found was that it'd mess up and the throbber would stop working if I fired it up before an existing one had been unblocked.

This is my solution ...

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

This ajaxLoaderPath is provided by my cshtml to get around problems with virtual directories.

回复收藏 0 原文

半步萧音过轻尘 2024-11-14 06:24:07

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

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

Throbber 模态：（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

    });
});

最终结果为：

I hate introducing another library for just one function, so I have implemented one myself, with just jQuery, JavaScript and Bootstrap 3.

When I press a button, my code adds a blocking modal to a table, does a ajax call, and waits 0.5 seconds, then unblocks, in order to show the spinning gif(because it can be too quick to notice). Thanks for @NaveedButt, I found https://icons8.com/preloaders/ to generate a gif with the theme color of my site.

Throbber modal: (gif centered horizontally and vertically)

<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>

The button:

<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

    });
});

The final result is:

回复收藏 0 原文