Stop Spinner.js

Question

Estoy utilizando spin.js (http://fgnass.github.com/spin.js/) mientras se carga una imagen de gran ancho/alto. El problema es que estoy teniendo problemas para detener la ruleta. El método stop() no parece funcionar. No es lo que tengo:

$(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); 
    }; 
}); 

También probé

.spin(false) 

y

.data('spinner').stop() 

Ésta es la configuración spinner:

$(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); 
}); 

Answer 1

Es necesario para almacenar el instancia spinner en algún lugar - de una manera tha t se puede acceder a él cuando lo necesite para detener el giro:

var spinner = new Spinner(opts).spin(target); 
$(target).data('spinner', spinner); 

Y ahora eres capaz de dejar de esta manera:

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

Answer 2

Usted puede dejar sin spinner ejemplo:

$(target).spin(false); 

Answer 3

Retire todo el DOM de containter, ejemplo:

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

Si es necesario aplicar sping lo añaden en

$('.loader').show().spin(); 

y destruir:

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

Recuerde, jQuery.empty() eliminar de forma automática todos los DOM del objeto antes de destruir.

Answer 4

Esto parece funcionar en todos los navegadores y utiliza menos código:

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