March 27, 2012
Spinner Minimum Time Delay Jquery
Question by Both FM
The following java-script is working fine (Jquery)
$(document).ready(function(){
$('#c_area').load($('.m_top:first').attr('href'))
});
$('.m_top').click( function(){
$("#myDiv").html('<img src="images/loading.gif" alt="Wait" />');
var name= $(this).attr('href');
$('#c_area').hide().load(name).fadeIn('normal');
$("#myDiv").html('');
return false;
});
I want to show the loading image (spinner) for 2 seconds minimum, because when page has already loaded, while click again on link, loading image (spinner) not display again because the page already loaded.
minimum time = 2 second
maximum time = until the contents loaded
Answer by Starx
Use delay(). Give the number of seconds in milliseconds like
$('#c_area').delay(2000).hide().load(name).fadeIn('normal');
//^ delay for 2 sec then hide
Here is your solution.
I used the setTimeout() to trigger the function after 2 seconds.
$('.m_top').click( function(){
var name= $(this).attr('href');
$('#c_area').html('<img src="images/loading.gif" alt="Wait" />');
setTimeout( function() {
$("#c_area").hide().load(name).fadeIn("normal");
},2000);
$("#myDiv").html('');
return false;
});
