jQuery 块 UI 旋转预加载器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6021848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Block UI spinning preloader
提问by Chad
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?
我想知道是否有人可以了解如何使用 jQuery Block UI 插件添加旋转预加载器（如苹果使用）。预加载器将不得不旋转，直到 AJAX 内容加载。这可以通过 Block UI 实现吗？
Any direction would be helpful, thanks!
任何方向都会有所帮助，谢谢！
回答by mujimu
Find a good animated throbber image off the web, like this:
在网上找到一个好的动画 throbber 图像，如下所示：
Set up a hidden throbber div to show it.
设置一个隐藏的 throbber div 来显示它。
<div id="throbber" style="display:none;">
<img src="/img/busy.gif" />
</div>
Tell blockUI to use that div as the message.
告诉 blockUI 使用该 div 作为消息。
$.blockUI({ message: $('#throbber') });
After the ajax call completes, kill the throbber:
ajax调用完成后，杀死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.
您还可以使用 ajax 成功/错误回调来控制每个结果的 blockUI，而不是完成。
回答by Naveed Butt
Yes, this is possible. You can add a pre-loader on your website in any style you want using this website...
是的，这是可能的。您可以使用本网站以您想要的任何样式在您的网站上添加预加载器...
UPDATE:
更新：
See this for further details...
有关更多详细信息，请参阅此内容...
回答by Antony Scott
I've taken the answer provided by mujimuand 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.
我已经接受了mujimu提供的答案并解决了一个小问题。我同时使用了“throbber”的多种用法。我发现它会搞砸，如果我在现有的一个被解锁之前启动它，它就会停止工作。
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.
这个 ajaxLoaderPath 由我的 cshtml 提供，用于解决虚拟目录的问题。
回答by WesternGun
I hate introducing another library for just one function, so I have implemented one myself, with just jQuery, JavaScript and Bootstrap 3.
我讨厌为一个函数引入另一个库，所以我自己实现了一个库，只使用 jQuery、JavaScript 和 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.
当我按下按钮时，我的代码会向表格添加一个阻塞模式，执行 ajax 调用，并等待 0.5 秒，然后解除阻塞，以显示旋转的 gif（因为它可能太快而无法注意到）。感谢@NaveedButt，我找到了 https://icons8.com/preloaders/来生成一个带有我网站主题颜色的 gif。
Throbber modal: (gif centered horizontally and vertically)
Throbber modal：（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>
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:
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:
最终结果是：
