jQuery - IE7 does not animate gif in modal dialogue

Question

I have an animated gif that lets the user know a page is loading. The GIF does not animate in IE7. After some troubleshooting I know the problem can be caused by

Preload event loading images in body tag (not the case).
An IE Setting in Tools > Internet Options > Advanced tab > Multimedia section > "Play animations in webpages*" should be checked. It is checked

.

The GIF still does not animate. I created a webpage.

This animates in IE7:

<div>
    <img src="images/ajax-loader.gif" alt="Loading..." />
</div>

This does not animate in IE7

jQuery

                $('.searchButton').click(function () {
                    $("#divLineItemComments").dialog("open");
                });

ASP.NET

<asp:Button ID="searchBtn" Text="Search" class="search_btn searchButton" 
                                    runat="server" onclick="searchBtn_Click"  />

            <div id="divLineItemComments" style="display:none;clear:both;text-align:center;">
                <div>                    
                    <img src="images/ajax-loader.gif" alt="Loading..." />
                </div>
            </div>

ASP.NET Code Beside

protected void searchBtn_Click(object sender, EventArgs e)
{
    Thread.Sleep(2000);//simulate work
    Response.Redirect("Animate.aspx");//redirect back to current page to complete POST
}

Dropping the dialogue code out entirely and instead using div.Show() also fails

                $('.searchButton').click(function () {
                    $("#divLineItemComments").show();
                });

So this tells me the issue is most likely with jQuery. The issue occurs in IE7, not firefox 4. How can I fix it? Maybe jQuery pre-loads images in the background...I dunno..?

I wrestled with something like this for a long time in IE7. Never solved it. Good luck. — , Jun 01 '11 at 17:58
Have you tried forcing the browser to hide the image itself and then show it? This call would immediately proceed the " $("#divLineItemComments").show();" call. Maybe that will force the browser to redraw the image. — jon_brockman, Jun 01 '11 at 17:58
@jon_brockman - not quite sure what you mean. I just tried letting the div be visible and then hiding it with div.hide() on document.ready. This did not work. — P.Brian.Mackey, Jun 01 '11 at 18:14
I also found a potential solution on SO. http://stackoverflow.com/questions/780560/animated-gif-in-ie-stopping. But, this only works when I `return false;` from my javascript. Pretty much blowing away the point of clicking submit (I need to POST)... — P.Brian.Mackey, Jun 01 '11 at 18:15
See: http://stackoverflow.com/questions/780560/animated-gif-in-ie-stopping — , Oct 14 '11 at 20:47

jon_brockman · Answer 1 · 2011-06-01T18:19:05.593

1

Try forcing the browser to draw the image when you show its container div. Here you'll initially be writing a placeholder image in your div but will be swapping its source attribute using JS after clicking your search button.

<div id="imageContainer">
    <img id="loadingImage" src="images/clear.gif" alt="Loading..." />
</div>

$('.searchButton').click(function () {
  $('#loadingImage').attr('src','images/ajax-loader.gif');
});

edited Jun 01 '11 at 18:19

answered Jun 01 '11 at 18:03

jon_brockman

373
1
11

This did not work either. I believe the issue is that IE stops all animations once you begin a POST. I put a link to a similar question on SO below my question. Though, the answers do not work. – P.Brian.Mackey Jun 01 '11 at 18:18
I think @AnthonyWJones is correct. @chrislegend Nothing works. http://stackoverflow.com/questions/780560/animated-gif-in-ie-stopping – P.Brian.Mackey Jun 01 '11 at 18:25

score 1 · Accepted Answer · edited May 23 '17 at 11:48

Nothing works. I've tried multiple workarounds. Similar questions on SO, the answers do not work if you need to POST. I didn't notice at first, but IE just stops all the animations (including the one I said was working) when the POST begins. Its impractical to convert everything to an ajax request.

I'm agreeing with AnthonyWJones on Animated GIF in IE stopping and going with

Ø no solution

jQuery - IE7 does not animate gif in modal dialogue

2 Answers2