I have a div on my page with the following css:
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .35 )
url('/NoAuth/cf/ajax-loader.gif')
50% 50%
no-repeat;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}
And I add or remove the "loading" class on the body when a .ajax call is made using:
jQuery(document).ready(function () {
jQuery('body').on({
ajaxStart: function() {
jQuery(this).addClass('loading');
},
ajaxStop: function() {
jQuery(this).removeClass('loading');
}
});
});
But much of the time, I find during the ajax call, the background changes color, but the gif doesn't show up. If, however, I go to the Firebug console and type jQuery('body').addClass('loading')
, the image does show up. And when I look at the "Net" tab in Firebug, it shows that it didn't load the gif until I typed that .addClass command.
Is there something I need to do to pre-load that background so it shows up all the time, or what can I do to prevent this problem?