It can depend on when the validate is called - if it is before the $('#loading_div')
has fully loaded then it won't work.
While AJAX calls are asynchronous things like DOM renders are not - what are you trying to do while the loading gif should be displayed?
From the comments you said this is how it's being called:
<input type="Submit" id="Login" value="Login" onclick="return validate();">
This code means that when validate()
returns false the button does nothing, when it returns true the submit button goes on and does its default behaviour - i.e. it submits the form. Once form submission has started the page is going to be unloaded, and so doesn't load any further resources.
What you could try is loading the spinner first, something like:
function validate() {
if (document.getElementById('email').value === '') {
alert('Please enter your email');
return false;
} else {
// Set the loading image
$('#loading_div').html('<img src="images/info-loading.gif"/>');
// Submit the form 200ms later
var $form = $(this).parents('form');
window.setTimeout(function() {$form.submit();}, 200);
// Return false so that the form post back doesn't start right away.
return false;
}
}