Display a GIF at start

Asked

Viewed 181 times

3

Setting

Have a page containing a div where content is loaded by Jquery and a div occult (hidden), with a GIF:

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

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

On this page, I have a button "Update" (working perfectly), which calls a method Jquery, and performs the steps :

  1. When you run to update the list, you hide the div of the list and displays the div with the gif.
  2. Having the return, does the reverse process.

Simply displays the GIF while waiting for "list" processing and return (extremely common).

The "problem"

The GIF it has "beginning/middle/end". Let’s assume it displays "1 2 3 4 5 6 7 8 9 10" in a 10-second interval.

Sometimes I press the "Update" button and it does not start from the beginning, but wherever it is at that moment (since it is there, but the div is only hidden).

Question

Would like whether there is a way to "see the GIF" at the beginning, i.e., whenever it is displayed, it starts again.

I don’t know if that would have to recharge it again, or how to do that.

php html

  • I think a more graphic solution is better than playing gif. How about making gif images independent of the display moment? As a spinner?

  • Sometimes you can have two identical images, and when you change the event you change the image for another equal, so theoretically it should start from 0, since it has just been called another img by ajax, or something like that... I don’t know if with ajax you can make a refresh just in the image...

  • @Jeffersonquesado spinner would be a "Carrousel"? I know what is in Android, not HTML

  • @hugocsl But then I would have 2 img with Hidden!? I wouldn’t give anyway?

  • I was thinking of creating another page, just with the GIF, and calling it in the list place while it is generated. Theoretically I am loading again, and so starting GIF, correct!? But I would download GIF every time!?

  • Face in fact the intention is that you take an image and include another "new", because if you call the same image, it does not make the refresh and will appear with the animation of where it is and not from the beginning. The idea of the page it legal tb, I believe it would not download every time not because it would come from the local cache and not from the server

  • @hugocsl When you say 2 pictures, there would be 2 div? If it stays in cache, even then it would be a new call, I think it would work right...

  • It wouldn’t really be two . gif... but I don’t know if it would work, it’s just an idea. When you request the image, even if it is in the cache it should start from the beginning, but it has to be the request, only hide and show with display or opacity should not work...

  • Got it... I know little about JS, so I can’t imagine what 2 GIF would look like. In my head it looks like this: I would have the div what use to give .show and .hide, and within 2 tags img, with the GIF, and every hour I display 1 of them interchangeably. Ahh.. I don’t know.. hahah

  • Swap the image url by passing a dummy parameter ". png? t=2342" being the value of T one at random and see if gif restarts without you having to remove the DOM element and include it again.

  • @Rboschini It didn’t work!

  • 1

    Put the loading.gif as background in css and when updating you manipulate the class of the element with addclass and at the end, just remove the class.

Show 7 more comments

1 answer

0

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

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

Browser other questions tagged php html

You are not signed in. Login or sign up in order to post.