locked
GIF not animated RRS feed

  • Question

  • User1510859543 posted

    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();" />
    

    Thursday, October 6, 2016 5:30 PM

Answers

  • User283571144 posted

    Hi 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

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 7, 2016 8:18 AM

All replies

  • User753101303 posted

    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.

    Thursday, October 6, 2016 6:41 PM
  • User1510859543 posted

    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.

    Thursday, October 6, 2016 8:28 PM
  • User283571144 posted

    Hi 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

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 7, 2016 8:18 AM
  • User1510859543 posted

    Thank you. Worked like a charm!

    Friday, October 7, 2016 5:18 PM