Animated GIF in IE stopping

2019-01-01 14:51发布

站内问答 / 移动开发
1896 16 6

Does anyone know a work around to make animated GIF's continue to be animated after you click a link or submit a form on the page your on in IE? This works fine in other browsers.

Thanks.

16条回答
像晚风撩人
2楼-- · 2019-01-01 15:26

Jquery:

$("#WhereYouWantTheImageToAppear").html('<img src="./Animated.gif" />');
查看更多
0人赞 添加讨论(0) 举报
若你有天会懂
3楼-- · 2019-01-01 15:27

Related to this I had to find a fix where animated gifs were used as a background image to ensure styling was kept to the stylesheet. A similar fix worked for me there too... my script went something like this (I'm using jQuery to make it easier to get the computed background style - how to do that without jQuery is a topic for another post):

var spinner = <give me a spinner element>

window.onbeforeunload = function() {
  bg_image = $(spinner).css('background-image');
  spinner.style.backgroundImage = 'none';
  spinner.style.backgroundImage = bg_image;
}

[EDIT] With a bit more testing I've just realised that this doesn't work with background images in IE8. I've been trying everything I can think of to get IE8 to render a gif animation wile loading a page, but it doesn't look possible at this time.

查看更多
0人赞 添加讨论(0) 举报
琉璃瓶的回忆
4楼-- · 2019-01-01 15:35

I came upon this post, and while it has already been answered, felt I should post some information that helped me with this problem specific to IE 10, and might help others arriving at this post with a similar problem.

I was baffled how animated gifs were just not displaying in IE 10 and then found this gem.

Tools→Internet Options→Advanced→MultiMedia→Play animations in webpages

hope this helps.

查看更多
0人赞 添加讨论(0) 举报
梦该遗忘
5楼-- · 2019-01-01 15:40

Very, very late to answer this one, but I've just discovered that using a background-image that is encoded as a base64 URI in the CSS, rather than held as a separate image, continues to animate in IE8.

查看更多
0人赞 添加讨论(0) 举报
长期被迫恋爱
6楼-- · 2019-01-01 15:41

old question, but posting this for fellow googlers:

Spin.js DOES WORK for this use case: http://fgnass.github.com/spin.js/

查看更多
0人赞 添加讨论(0) 举报
余生请多指教
7楼-- · 2019-01-01 15:42

Building on @danfolkes' answer, this worked for me in IE 8 and ASP.NET MVC3.

In our _Layout.cshtml

<body style="min-width: 800px">
    <div id="progress">
        <div style="min-height: 200px">
        </div>
        <div id="throbber">
            <img src="..\..\Content\ajax-loader.gif" alt="Progress" style="display: block;
                margin-left: auto; margin-right: auto" />
        </div>
    </div>
    <div id="main">

<<< content here >>> ...

<script type="text/javascript" language="javascript">
    function ShowThrobber() {
        $('#main').hide();
        $('#progress').show();
        // Work around IE bug which freezes gifs
        if (navigator.appName == 'Microsoft Internet Explorer') {
            // Work around IE bug which freezes gifs
            $("#throbber").html('<img src="../../Content/ajax-loader.gif" alt="Progress" style="display: block; margin-left: auto; margin-right: auto"/>');
         }
</script>
<script type="text/javascript" language="javascript">
    function HideThrobber() {
        $('#main').show();
        $('#progress').hide();
    }
</script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        HideThrobber();
    });
</script>

And in our navigation links:

<input type="submit" value="Finish" class="submit-link" onclick="ShowThrobber()"/>

or

@Html.ActionLink("DoSometthing", "MyController", new { Model.SomeProperty }, new { onclick = "ShowThrobber()" })
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)