How to reload the gif when exchanged?

Question

I have a div, and I have a gif as a background (a computer entering like a car). This gif is placed when the scrollTop is at specific number... If the user keeps scrolling I switch the background for another gif (the computer leaving). Here is the code for it:

if (($(window).width() > 1700 && vistaEstandar.scrollTop > 4286 && vistaEstandar.scrollTop < 5171) || ($(window).width() > 1700 && document.documentElement.scrollTop > 4286 && document.documentElement.scrollTop < 5171)) {   

            $('#section6').removeClass('monitorEstandarAnimacion');
            $('#section6').addClass('monitorEstandarFinal');
        }
        else
        {
            $('#section6').removeClass('monitorEstandarAnimacion');
            $('#section6').removeClass('monitorEstandarFinal');
        }

Ok, now, the classes assigned are the ones that contain the backgrounds

.monitorEstandarAnimacion
{
  background: url(../images/estandar/monitorEstandarEntrada.gif?q=) !important;
  background-size: cover !important;
  background-position: bottom !important;
  width: 100%;
}

.monitorEstandarFinal
{
  background: url(../images/estandar/monitorEstandarSalida.gif?q=) !important;
  background-size: cover !important;
  background-position: bottom !important;
  width: 100%;
}

The switching of backgrounds works. However, when I scroll back and the class is added again, the gif should start over, but it doesn't. The background becomes the last frame of the gif automatically. It's like the gif only works one (it only loops once), but I want it to work once (as it was made) everytime the switching occurs

a very similar question to this is found here: Restart animated GIF as background-image

and that would be perfect if not for the fact that I am working with scroll, so when trying to implement what he says, even though the gif switch works like a charm, It reloads everytime the scroll happens, not just once as intended.

As you can see, in the if statement there is a range stablished. In that range, the gif is supposed to play once. I have noticed though, that the repeting of the gif with each scroll might occur because is constantly reading the value thus replacing it over again, but I only need it once

UPDATE

Here is the fiddle. Here Is what's happening... the idea is that when they are changed back again, they should replay: https://jsfiddle.net/lj_tang/qynvg44b/11/

HTML code missing, please add everything you have into jsFiddle and send me a link. — Paulius K., Jul 26 '16 at 13:21
Possible duplicate of [Restart animated GIF as background-image](http://stackoverflow.com/questions/7568855/restart-animated-gif-as-background-image) — cyberbit, Jul 26 '16 at 13:28
@cyberbit Could that be accomplish with the scroll as well? that user used a click event... not sure if that would work with the if statement, though I want to accomplish the same effect — Caro, Jul 26 '16 at 14:15
@PauliusK. https://jsfiddle.net/lj_tang/qynvg44b/9/ there is the basic code I have... though for some reason I can't get the images to upload — Caro, Jul 26 '16 at 17:27

SteinB · Accepted Answer · 2016-07-27T07:32:16.263

3

Change the image with jQuery instead of css. The version will make sure that there is a different url everytime. Now it forces to load!

var v = 0;
if (($(window).width() > 1700 && vistaEstandar.scrollTop > 4286 && vistaEstandar.scrollTop < 5171) || ($(window).width() > 1700 && document.documentElement.scrollTop > 4286 && document.documentElement.scrollTop < 5171)) {
    ++v;
    $('#section6').css('background-image', 'url(../images/estandar/monitorEstandarEntrada.gif?q='+v+')');
} else {
    ++v;
    $('#section6').css('background-image', 'url(../images/estandar/monitorEstandarSalida.gif?q='+v+')');
}

If you are running this code above in a function place the ++v under the if statement.

And also its a best practise to not repeat code in css.

#section6 {
  background-size: cover;
  background-position: bottom;
  width: 100%;
}

edited Jul 27 '16 at 07:32

answered Jul 26 '16 at 14:20

SteinB

162
1
11

thank you, totally best practice not to repeat code, my bad. However, I just tried it and it doesn't force the gif to reload – Caro Jul 26 '16 at 14:44
1

It sure now works now! I tested it myself now :) Forgot to put the version in after the q. What happens now that there is a different url everytime. Now it forces to load! – SteinB Jul 27 '16 at 07:33
but if it's a different URL, it won't be the image. I mean, i won't find it because he URL doesn't actually exists... it gave me this error "Failed to load resource: the server responded with a status of 404 (Not Found)" and it makes sense since we are changing the URL EDIT: my bad, it finds the image and it loads but only the first time – Caro Jul 27 '16 at 12:40
We are not changing the image url, we just add a parameter thats useless. Thats we the image should reload. Here i made a fiddle with 2 no loop gifs: https://jsfiddle.net/dhxqcuwr/ – SteinB Jul 27 '16 at 13:31
here is the fiddle with the scroll, check it out to see what I mean https://jsfiddle.net/lj_tang/qynvg44b/11/ – Caro Jul 27 '16 at 14:27
Yeah, you putted the var v = 0 inside the scroll event. placed it outside. and it works. it does change everytime you scroll so make a extra data attrr. – SteinB Jul 27 '16 at 14:53
1

man, I LOVE YOU!!! this worked out perfectly. You Sir are a genius... Hope I can learn that much! – Caro Jul 27 '16 at 15:12
1

if it's not more trouble, if you could explain what you did... I see you made a conditional with the data-image... you saved my day sir. I had to give it today to my boss – Caro Jul 27 '16 at 15:20
Glad i could help! :D – SteinB Jul 28 '16 at 06:53

How to reload the gif when exchanged?

1 Answers1