可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am trying to display an ajax spinner when loading AJAX content.

The following code appears to work fine in Firefox but not in IE7. The functions to show and hide the spinner are being called but the browser just does not display it.

Here is the jQuery:

        $.ajax({ 
            url: filterorSearch,
            data: {filterParams: JSON.stringify(filters), requestTime: new Date().getTime()},
            beforeSend: function(){
                showLoadingGraphic();
            },
            complete: function(){
                hideLoadingGraphic();
            },
            success: function(data){
                $("#BreakingNews").html(data);
                GetRelatedarticles();                
            }
        });

    function showLoadingGraphic() {
        alert("show");
        var showSpinner = $('#page-placeholder-wrapper #main-left').prepend('<div id="ajaxLoader"></div>');
        return showSpinner;
    }

    function hideLoadingGraphic() {
        alert("hide");
        var hideSpinner = $('#ajaxLoader').remove();
        return hideSpinner;
    }

And the associated CSS for the spinner:

#page-placeholder-wrapper #main-left 
{
    position:relative;
    }

#ajaxLoader 
{
    background:rgba(255,255,255,.7) url("../images/icon-ajax-loading.gif") no-repeat center center;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:9999;
    }

回答1:

To get you working try this:

    background: url("../images/icon-ajax-loading.gif") no-repeat center center rgba(255,255,255,.7);

I don't know why the rgba has to be last!

[EDIT]

IE does not support rgba, therefore with it starting on background: it errors and the rest of the line isn't executed for the css

See: Browser Support for RGBa

回答2:

JQuery actually fires events when it's doing ajax.

$(document).ajaxStart(function(){
    $('#ajaxIndicator').show();
 }).ajaxStop(function(){
    $('#ajaxIndicator').hide();
 });

This will save you a lot of time over manually doing it for each individual call.

You could have a DIV relative to the top of the document which you can show/hide which overlays everything else on the page. (I forget the exact CSS which makes it always be 200px from the top of the screen, etc) update: I think it's position:fixed, although I'm not sure how well this will work in IE.

  <body>
    <div id="ajaxIndicator" style="position:fixed; top:200px; text-align:center">
        <img src="../indicator.gif" /> Loading ...
    </div>

    ...

回答3:

Might be problems with Z sorting of your DOM elements;

IE handles Z sorting of objects in a bit different way then other browsers. Try setting z-index on your wrapper element and it should help. Generally it's a best practice if you want to save you troubles with elements positioned with relatie or absolute positioning to always give their parent proper z-index;

Having the actual page to debug would make it easier.