Question

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?

Answer 1

Maybe it’s because of the display:none CSS attribute.
Why don’t you make it invisible when the document is ready ? The loading would appear during the loading of the document. Just remove the display attribute in .modal

And the javascript :

jQuery(document).ready(function () {
    jQuery('body .modal').hide();
    jQuery('body').on({
      ajaxStart: function() {
        jQuery(this).addClass('loading');
      },
      ajaxStop: function() {
        jQuery(this).removeClass('loading');
      }
    });
});