анимированный gif не анимирует

Question

У меня есть анимированный gif на главной странице, который будет загружать всякий раз, когда пользователь нажимает определенные кнопки. gif отображает, но не оживляет в IE. Я добавил класс скрыть (ZURB) в div и показать и скрыть div на основе этого класса (addClass/removeClass JQuery).

ПРИМЕЧАНИЕ: МФП одушевляет, если я использую скрыть() и шоу() методы в Jquery и удалить zurb CSS класс '.hide', что я добавил.

Я хочу установить видимость div для скрытия на главной странице, а затем переключить его только на несколько дочерних страниц. Как я могу это достичь?

CSS:

#loading{position:fixed;top:0px;right:0px;width:100%;height:100%;background-color:#666;background-image:url('ajax-loader.gif'); background-repeat:no-repeat;background-position:center;z-index:10000000; opacity: 0.4; 
filter: alpha(opacity=40); /* For IE8 and earlier */} 

HTML Master Page:

<div id="loading" runat="server" class="hide"></div> 

Jquery детской страницы:

$("#<%=Master.FindControl("loading").ClientID %>").removeClass("hide"); 

CSS шкуры (Zurb):

.hide { 
    display: none !important; 
} 

Answer 1

Вам нужно повторно отобразить img onclick. Попробуйте что-то вроде этого

function showProgress() { 
     var pb = document.getElementById("progressBar"); 
     pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>'; 
     pb.style.display = ''; 
    } 

and in your html: 

<input type="button" value="button" onclick="showProgress()" /> 
<div id="progressBar" style="display: none;"> 
    <img src="./progress-bar.gif" width="200" height ="40"/> 
</div> 

См аналогичный пост here

Answer 2

Это известный IE ограничения. вы можете загрузить и установить отображение: none; Затем вы можете установить видимость true, когда пользователь нажимает определенную кнопку. Два полезных ссылки: Animated GIF in IE stopping И IE7/IE8 and frozen animated gifs