我在网络应用程序中使用 spin,它工作得很好,但在一种情况下,它不起作用。
在进行 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);
}
}
在成功函数中我调用方法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();
});
在removeLoading中我只调用mySpinner.stop();
微调器从未显示。 ajax 调用需要一些时间才能完成(几秒钟),如果我使用 chrome 进行调试并设置断点,我会看到自旋已创建,即使我直接在 removeLoading 函数中设置断点,也会显示自旋。
提前致谢
©a-x-i
最佳答案
我认为你可以首先改进一些事情:
您的函数
showLoading
定义选项,动态创建一个元素,将其附加到主体并最终启动微调器。我会将其分为两个步骤:1.1。创建一个函数
setupLoading
,用于创建元素、定义选项并设置mySpinner
。该函数将在开始时仅被调用一次。1.2。将
showLoading
更改为mySpinner.spin();
您没有显示对
showLoading()
的调用,因此我不确定您如何调用微调器。但是,您可以使用事件ajaxStart
和ajaxStop
来自动绑定(bind)(从而删除.success(..
)。
所以,这是经过此更改的代码(这里是 a working 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);
});
关于javascript - spin.js 微调器未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26527246/