Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/427.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Stop Spinner.js_Javascript_Jquery - Fatal编程技术网

Javascript Stop Spinner.js

Javascript Stop Spinner.js,javascript,jquery,Javascript,Jquery,我正在使用spin.js(),同时加载一个大的全宽/高图像。问题是我无法停止旋转器。stop()方法似乎不起作用。我得到的是: $(document).ready(function($) { var img = new Image(); img.src = $('#top-bg').css('background-image').replace(/url\(|\)/g, ''); img.onload = function(){ $("#top-bg")

我正在使用spin.js(),同时加载一个大的全宽/高图像。问题是我无法停止旋转器。stop()方法似乎不起作用。我得到的是:

$(document).ready(function($) {
    var img = new Image();
    img.src = $('#top-bg').css('background-image').replace(/url\(|\)/g, '');

    img.onload = function(){
        $("#top-bg").spinner.stop();
        $(".top-bar").delay(1500).fadeIn(5000);
        $("#arrow, #arrowrt, #top-icons").delay(5000).fadeIn(5000);
    };
});
我也试过了

.spin(false)

这是微调器设置:

$(document).ready(function($) {
    var opts = {
    lines: 9, // The number of lines to draw
    length: 11, // The length of each line
    width: 4, // The line thickness
    radius: 10, // The radius of the inner circle
    rotate: 0, // The rotation offset
    color: '#fff', // #rgb or #rrggbb
    speed: 0.9, // Rounds per second
    trail: 54, // Afterglow percentage
    shadow: false, // Whether to render a shadow
    hwaccel: false, // Whether to use hardware acceleration
    className: 'spinner', // The CSS class to assign to the spinner
    zIndex: 2e9, // The z-index (defaults to 2000000000)
    top: 'auto', // Top position relative to parent in px
    left: 'auto' // Left position relative to parent in px
   };
   var target = document.getElementById('top-bg');
   var spinner = new Spinner(opts).spin(target);
});

您需要将spinner实例存储在某个位置,以便在需要停止旋转时可以访问它:

var spinner = new Spinner(opts).spin(target);
$(target).data('spinner', spinner);
现在你可以这样阻止它:

$('#top-bg').data('spinner').stop();

您可以在没有实例的情况下停止微调器:

$(target).spin(false);

删除容器的所有DOM,例如:

<style type="text/css">.loader{ display: none; }</style>
<div>
    <span class="loader"></span>
    <span>Foo</span>
</div>
并摧毁:

$('.loader').hide().empty();

记住,jQuery.empty()在销毁之前会自动删除对象的所有DOM。

这似乎可以跨浏览器工作,并且使用的代码更少:

$(".spinner").remove();

你能为我们提供设置微调器的代码吗?我添加了微调器设置,如果这是你的意思的话。不过,刚刚在Opera中测试过,但它不起作用。。。有什么想法吗?谢谢!我觉得这样做比较容易,这是唯一对我有效的方法。非常感谢。
$('.loader').hide().empty();
$(".spinner").remove();