[英]spin.js spinner not showing
I use spin in a webapplication and it works just fine, but in one case, it doesn't. 我在网络应用程序中使用了spin,它工作得很好,但在某些情况下却不能。
Before I make an ajax call, i call the function showLoading(); 在进行ajax调用之前,我先调用函数showLoading();。
function showLoading() {
$('<div id="divSpin"></div>').appendTo(document.body);
var target = document.getElementById("divSpin");
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 8, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'mySpin', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
if (mySpinner) mySpinner.spin(target);
else {
mySpinner = new Spinner(opts).spin(target);
}
}
in the success function i call the method removeLoading: 在成功函数中,我调用方法removeLoading:
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(jsonObject),
contentType: "application/json; charset=utf-8",
dataType: 'json',
async: async
}).success(function (data, textStatus, jqXhr) {
callback(data);
removeLoading();
});
in the removeLoading I only call mySpinner.stop(); 在removeLoading中,我仅调用mySpinner.stop();。
The spinner is never shown. 旋转器从未显示。 The ajax call needs some time to be finished (a few seconds) and if I debug with chrome and make a breakpoint, I see the spin is created, even if I set the breakpoint directly in my removeLoading-function the spin is shown. Ajax调用需要一些时间才能完成(几秒钟),如果我使用chrome调试并创建了一个断点,即使我直接在removeLoading-function中设置了断点,旋转也会显示出来。
thx in advance 提前
©axi ©AXI
I think you can improve a few things first: 我认为您可以首先改善以下几点:
Your function showLoading
defines the options, creates an element on-the-fly, appends it to the body and eventually starts the spinner. 您的函数showLoading
定义了这些选项,即时创建了一个元素,将其附加到主体上并最终启动了微调器。 I would separate this into two steps: 我将其分为两个步骤:
1.1. 1.1。 Create a function setupLoading
that creates the element, defines the options and sets mySpinner
. 创建一个函数setupLoading
,该函数创建元素,定义选项并设置mySpinner
。 This function will be called just once, at the beggining. 在开始时,该函数将仅被调用一次。
1.2. 1.2。 Change showLoading
to just mySpinner.spin();
更改showLoading
只是mySpinner.spin();
You don't show the call to showLoading()
so I'm unsure how are you calling the spinner. 您没有显示对showLoading()
的调用,所以我不确定您如何调用微调showLoading()
。 However, you could use the events ajaxStart
and ajaxStop
to bind automatically (thus removing removeLoading();
on .success(..
). 但是,您可以使用事件ajaxStart
和ajaxStop
进行自动绑定(从而在.success(..
)上删除removeLoading();
.success(..
So, here's your code with this changes (and here's a working jsfiddle ): 因此,这是您所做的更改的代码(这是一个有效的jsfiddle ):
var mySpinner = null;
function setupLoading() {
$('<div id="divSpin" />').appendTo(document.body);
var target = document.getElementById("divSpin");
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 8, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'mySpin', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
mySpinner = new Spinner(opts).spin(target);
}
function removeLoading(){
mySpinner.stop();
}
function showLoading() {
mySpinner.spin();
}
//Setup spinner
setupLoading();
// bind ajax to events
$(document).on('ajaxStart', showLoading);
$(document).on('ajaxStop', removeLoading);
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(jsonObject),
contentType: "application/json; charset=utf-8",
dataType: 'json',
async: async
}).success(function (data, textStatus, jqXhr) {
callback(data);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.