locked
Replay gif image asp.net c# RRS feed

  • Question

  • User-1901014284 posted

    Hi,

    I have the below code which runs a gif image on page load automatically (please see code below):

    <img src="/Images/Tutorials/Lead.gif" alt="Lead gif image" /> 

    the gif above will only play once after the page has loaded, what I would like to do is add a button to replay the gif or if easier to have the gif on an infinite loop so the gif is constantly repeated.

    If anyone can provide any assistance it would be greatly appreciated.

    Kind regards

    Jonny

    Wednesday, September 5, 2018 9:09 AM

Answers

  • User753101303 posted

    Hi,

    Try document.getElementById("yourID").src=document.getElementById("yourID").src;

    That is assigning the src property again should replay the gif. Also you could try an image editing tool. The gif file format should include the ability to repeat the animation forever.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 5, 2018 10:32 AM
  • User-1171043462 posted

    Two things

    1. Edit your GIF and make it run in infinite.
    2.  Use JavaScript and setInterval function and set the interval based on length of GIF.
          <img id="myImg" src="myGif.gif" />
          <script type="text/javascript">
              window.onload = function () {
                  setInterval(function () {
                      document.getElementById("myImg").src = "";
                      setTimeout(function () {
                          document.getElementById("myImg").src = "myGif.gif"
                      }, 100); //milliseconds
                  }, 3000); //3000 milliseconds = 3 sec
              };
          </script>
      I have set 3 sec as duration of my GIF and I have to give a 100ms delay so that browser changes the Images and starts again.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 5, 2018 11:07 AM

All replies

  • User753101303 posted

    Hi,

    Try document.getElementById("yourID").src=document.getElementById("yourID").src;

    That is assigning the src property again should replay the gif. Also you could try an image editing tool. The gif file format should include the ability to repeat the animation forever.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 5, 2018 10:32 AM
  • User-1171043462 posted

    Two things

    1. Edit your GIF and make it run in infinite.
    2.  Use JavaScript and setInterval function and set the interval based on length of GIF.
          <img id="myImg" src="myGif.gif" />
          <script type="text/javascript">
              window.onload = function () {
                  setInterval(function () {
                      document.getElementById("myImg").src = "";
                      setTimeout(function () {
                          document.getElementById("myImg").src = "myGif.gif"
                      }, 100); //milliseconds
                  }, 3000); //3000 milliseconds = 3 sec
              };
          </script>
      I have set 3 sec as duration of my GIF and I have to give a 100ms delay so that browser changes the Images and starts again.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 5, 2018 11:07 AM
  • User-1901014284 posted

    Thank you both, I have tried both solutions and both work :)

    Again thank you for your assistance.

    Wednesday, September 12, 2018 8:59 AM