spin.js纺纱机未显示

Question

我在一个网络应用程序中使用了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进行调试并创建一个断点，就会看到spin已经创建，即使我在远程加载函数中直接设置了断点，spin也会显示出来。

thx预先

A-x-i

Answer 1

我认为你可以先改进几件事：

1. 您的函数showLoading定义了选项，创建了一个动态元素，并将其追加到主体中，并最终启动了旋转器。我将把这分为两个步骤： 1.1。创建一个创建元素、定义选项和设置setupLoading的函数mySpinner。这个函数只会被调用一次，在乞讨时。 1.2。将showLoading更改为mySpinner.spin();
2. 您没有显示对showLoading()的调用，所以我不知道您是如何调用spinner的。但是，您可以使用events ajaxStart和ajaxStop自动绑定(从而删除.success(..上的removeLoading(); )。

下面是您修改的代码(下面是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);
});