GIF not animated [Answered]RSS

4 replies

Last post Oct 07, 2016 05:18 PM by dlchase

‹ Previous Thread|Next Thread ›

Shortcuts

dlchase

Member

319 Points

1444 Posts

GIF not animated

Oct 06, 2016 05:30 PM|dlchase|LINK

I have an animated gif file that rotates when placed into an img element on a page. However, I want it to be hidden until I click a button on the page (while page is submitted). What I have tried is summarized below. When I click the button it does show the gif but it is not animated. Also, when the DIV is displayed, the span does not show. How do I get it to spin until the page posts back?

    <script type="text/javascript">
        function showmsg() {
            document.getElementById('msgdiv').style.display = 'block';
        }
    </script>

        <div id="msgdiv" style="color: #FF0000; font-size: 200%; display: none;">
            <img id="imgprogress" src="images/loader.gif" alt="please wait ..." />
            <br />
            <span>Please wait while QB is searched.</span>
        </div>

        <asp:Button ID="BtnFindName" runat="server" Text="Find in QB" OnClientClick="showmsg();" />

DavidInBD

- Reply
PatriceSc
All-Star

45560 Points

16538 Posts

Re: GIF not animated

Oct 06, 2016 06:41 PM|PatriceSc|LINK

Hi,

This is a behavior In noticed once in IE (gif animations are stopped when submitting the form). If I remember I fixed that by using a setTimeout that just copy the src attribute to itself which launch again the animation shortly after the postback.

Edit: for the span try perhaps F12 in your browser to see if you don't have some unexpected CSS rules applied to this span.
- Reply
dlchase
Member

319 Points

1444 Posts

Re: GIF not animated

Oct 06, 2016 08:28 PM|dlchase|LINK

Yes, it works great in Chrome.

The span issue went away when I removed the <br /> element above it. Weird! Also, the F12 showed the break as <br><br /> and not sure why.

DavidInBD

Brando ZWZ

Star

9501 Points

2979 Posts

Re: GIF not animated

Oct 07, 2016 08:18 AM|Brando ZWZ|LINK

Hi dlchase,

dlchase
GIF not animated

As far as I know, when a postback occurs in Internet Explorer, it stops all animations on the page, as mentioned.

The trick to fixing this is to reload the animated gifs when the postback occurs.

More details, you could refer to follow codes:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
     <script type="text/javascript">
        function showmsg() {
            document.getElementById('msgdiv').style.display = 'block';
            document.getElementById('imgprogress').src = '111.gif';
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <div id="msgdiv" style="color: #FF0000; font-size: 200%; display: none;">
            <img id="imgprogress" alt="please wait ..." />
            <br />
            <span>Please wait while QB is searched.</span>
        </div>

        <asp:Button ID="BtnFindName" runat="server" Text="Find in QB" OnClientClick="showmsg();" OnClick="BtnFindName_Click" />
    </div>
    </form>
</body>
</html>

Code-behind:

        protected void BtnFindName_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(5000);
        }

Best Regards,

Brando

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

- Reply
dlchase
Member

319 Points

1444 Posts

Re: GIF not animated

Oct 07, 2016 05:18 PM|dlchase|LINK

Thank you. Worked like a charm!

DavidInBD

‹ Previous Thread|Next Thread ›