Question

I have the following HTML:

<div id="loading-overlay">
    <div id="loading-overlay-background"></div>
    <div id="loading-overlay-content">
        Processing...
        <br />
        <img src="@Url.Content("~/Content/img/ajax-loader.gif")" title="" alt="Please Wait" />
    </div>
</div>

And the CSS:

#loading-overlay
{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:5000;
}
#loading-overlay-background
{
    position:relative;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:#000;
    opacity:0.5;
    filter:alpha(opacity=50);
    z-index:5001;
}
#loading-overlay-content
{
    position:fixed;
    top:25%;
    left:50%;
    margin-left:-150px;
    margin-top:-20px;
    height:40px;
    width:300px;
    color:#fff;
    text-align:center;
    z-index:15002;
}

And here is some JavaScript (jQuery):

$.ajax({
                url: 'controller/action',
                beforeSend: function () {
                    $('#loading-overlay').show();
                },
                success: function (data, textStatus, jqXHR) {
                },
                error: function (xhr) {
                },
                complete: function () {
                    $('#loading-overlay').hide();
                }
            });

Why isn’t my “loading overlay” showing up in any version of IE on any AJAX call?

EDIT: Yes, it works great in FireFox and Chrome. These AJAX calls could take anywhere from a fraction of a second to about 20 seconds to complete. Alert messages do show up, but the HTML doesn’t.

Answer 1

Try something like this,

beforeSend: function () {
   $('#loading-overlay').show(1);
},

complete: function () {
    $('#loading-overlay').delay(500).hide(250);
}

See it in action, here..

EDIT:

You may also try decreasing the animation frame rate.

Using jQuery.fx.interval = 50;

By default, this is set to 13 ms. Increasing this could reduce the burden on CPU resources with the use of .fadeIn(). But caution is advised while tweaking this. Read more here.