Stop Spinner.js

Question

I am using spin.js ( http://fgnass.github.com/spin.js/ ) while loading a large image of full width / height. The problem is that I have problems stopping the counter. The stop () method does not work. There I have:

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

I also tried

 .spin(false) 

and

 .data('spinner').stop() 

These are the counter settings:

 $(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

You need to save the spinner instance somewhere - so that you can access it when you need it to stop the rotation:

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

And now you can stop it like this:

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

Answer 2

You can stop the counter without an instance:

 $(target).spin(false); 

Answer 3

This seems to work in browsers and uses less code:

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

Answer 4

Remove all DOM containers, for example:

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

If you need to apply sping, add it to

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

And destroy:

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

Remember that jQuery.empty () automatically deletes the entire DOM of an object before destroying it.