Background animation does not animate in Internet Explorer 9.0

Question

I am using Jquery to hide/show divs on form submit - to hide the form and to show a "loading..." text and animation. It works fine in all browsers except Internet Explorer (my version is 9.0). In Internet Explorer the background animation does not animate, it appears as a static gif. Any ideas how to solve this problem?

Background animation was generated @ http://www.ajaxload.info/ website

script:

<script type="text/javascript">                                         
$(document).ready(function(){
    $("#enf").submit(function(){
        $('#formdiv').hide();
        $('#wait').show();    
    });
});
</script>

form

    <div id="formdiv">
    <form id="enf" name="enf" enctype="multipart/form-data" action="/upload4.php" method="post">
        ......form elements.......
        <input type="submit" value="Send" name="add" />
    </form>
    </div>
    <div id="wait">Please wait...</div>

css file:

#wait{
    display:none;
    text-align:center;
    float:left;
    width:778px;
    background:#fdfdfd url('/loading.gif') no-repeat center center;padding:60px 0 20px 0;
}

I think name attribute of form is clashing with id attribute as both are same, can you rename your form name attribute and check, — defau1t, Nov 30 '12 at 11:10
I changed it but Internet Explorer still show animation as a static gif. — user1821484, Nov 30 '12 at 11:13
What happens when you open just the gif file in IE9, does it animate? — jfrej, Nov 30 '12 at 11:15
replace $('#formdiv').hide(); with this $(this).parent().hide(); — defau1t, Nov 30 '12 at 11:17
Possible duplicate: [animated-gif-in-ie-stopping](http://stackoverflow.com/questions/780560/animated-gif-in-ie-stopping) and [the answer](http://stackoverflow.com/a/780617/206614). — jfrej, Nov 30 '12 at 11:22
When I open just a gif file in IE9, it does animate without any problems. I tried to replace $(this).parent().hide(); but it does not help. — user1821484, Nov 30 '12 at 11:23
I added gif to the container:
Please wait...
but this does not help. It sows up as a static. — user1821484, Nov 30 '12 at 11:29
Did you read the answer I linked to? It says it's how IE works - it stops execution of GIF animations when you submit a form. — jfrej, Nov 30 '12 at 11:34
Yes, I read the answer and I tried solution from http://stackoverflow.com/questions/780560/animated-gif-in-ie-stopping but it does not animate anyway :( — user1821484, Nov 30 '12 at 11:41
It looks that I have to leave it as it is. Always problems with Internet Explorer :( — user1821484, Nov 30 '12 at 11:45

score 3 · Answer 1 · answered Apr 17 '13 at 13:57

I know this is an old question, but I ran into the same problem today. Here's my solution to the CSS background specific image not animating (rather than an img tag). It works in IE8, IE9, and the latest versions of Firefox and Chrome.

JavaScript:

$(function () {
    var submitButton = $('input[type="submit"]');
    submitButton.button('enable');
    submitButton.after('<span class="spinner"></span>');
    submitButton.parents('form:first').submit(function () {
        submitButton.button('disable');
        window.setTimeout("ieSpinnerFix()", 25);
    });
});

function ieSpinnerFix() {
    $('.spinner').css('background', 'url(/Content/Common/Images/ajax-loader.gif) no-repeat center left');
    $('.spinner').show();
    window.setTimeout("anyOtherFunctions()", 5000);
}

function anyOtherFunctions() {
    $('.spinner').text('We are processing your request, please stand by for awesomeness.');
}

HTML:

<form action="/Search" method="post">
    <div class="pageNav">
        <input type="submit" value="Search" />
    </div>
</form>

CSS Styles:

.spinner {
    display: none;
    padding-left: 20px;
    background: url('/Content/Common/Images/ajax-loader.gif') no-repeat center left;
    margin: auto 10px;
}

The idea is that the initial setTimeout allows the browser to calm down after submitting the form. I ran into strange issues with Chrome if the time out was too low. The reapplying of the background CSS to the is similar to the fixes for tags that have been referenced in other posts.

answer still holds strong. i used it in a condition to fire only in IE `self.ua = window.navigator.userAgent; self.msie = self.ua.indexOf("MSIE "); self.isIE11 = self.ua.match(/Trident.*rv[ :]*11\./);if( self.msie > 0 || self.isIE11 ) { self.ieProgressFix(); } ` — kingkode, Mar 17 '15 at 16:30

Background animation does not animate in Internet Explorer 9.0

1 Answers1