HTML jquery throbber

Posted 2021-05-24

<script type='text/javascript'>
             $(document).ready(function(){
                $("#working").bind("ajaxSend", function(){
                  $(this).show();
                }).bind("ajaxComplete", function(){
                  $(this).hide();
                });
             });
            </script>

jqueryajax请求的绑定throbber div

jQuery bindings for showing and hiding a div during AJAX requests. The div will not show unless the AJAX request takes a certain amount of time (in this case 300ms). This will reduce the flicker effect of showing and hiding throbbers.

$('#loading').bind('ajaxStart', function() {
	var n = $(this);
	n.data('state', 'started');
	setTimeout(function() {
		if (n.data() && n.data().state == 'started') {
			n.slideDown(500);
		}
	}, 300);
}).bind('ajaxStop', function() {
	var n = $(this);
	n.data('state', 'stopped');
	n.slideUp(500);
});