Display a GIF from the beginning

4

Scenario

I have a page that contains a div where content is loaded by JQuery and a div hidden ( hidden ), with a GIF:

<div id="lista"></div>

<div id="loading" hidden>
    <img src="loading.gif"/>
</div>

On this page, I have a Refresh button, which calls a JQuery method, and performs the steps:

  • When you run to refresh the list, it hides the div from the list and displays the div with the gif.
  • Having the return, does the reverse process.
  • Simply display the GIF while waiting for the processing and return of the (extremely common) list.

    The "problem"

    GIF it has "start / middle / end" . Let's suppose that it displays "1 2 3 4 5 6 7 8 9 10" within 10 seconds.

    Sometimes I hit the "Refresh" button and it does not start at the beginning, but rather where it is at the moment (since it is there, but the div is only hidden).

    Question

    I would like to know if there is a way to "see the GIF" at the beginning, that is whenever it is displayed, it will start again .

    >

    I do not know if this would have to reload it again, or how to do it.

        
    asked by anonymous 01.08.2018 / 17:08

    1 answer

    1

    Another solution would be to leave the "src" of the gif blank or null, and when you perform your "refresh", the "src" is corrected along with the visibility or display style attributes. >

    There are also solutions like libgif-js and x-gif for you to control how the gifs are executed.

        
    02.08.2018 / 03:34