javascript - 交换时如何重新加载gif？

Question

我有一个div，我有一个gif作为背景(电脑像汽车一样进入)。当 scrollTop 处于特定数字时放置此 gif...如果用户继续滚动，我将背景切换为另一个 gif(计算机离开)。这是它的代码:

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');
        } 

好的，现在分配的类是包含背景的类

.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%;
}

背景的切换有效。但是，当我向后滚动并再次添加该类时，gif 应该重新开始，但事实并非如此。背景自动成为 gif 的最后一帧。这就像 gif 只工作一个(它只循环一次)，但我希望它在每次切换时工作一次(因为它是制作的)

在这里可以找到与此非常相似的问题:Restart animated GIF as background-image

如果不是因为我正在使用滚动这一事实，那将是完美的，所以当尝试实现他所说的内容时，即使 gif 开关像一个魅力一样工作，它会在每次滚动时重新加载，而不是一次有意的。

如您所见，在 if 语句中建立了一个范围。在该范围内，gif 应该播放一次。不过我注意到，每次滚动都会重复 gif，因为不断读取值，从而再次替换它，但我只需要一次

更新

这是 fiddle 。这就是正在发生的事情......这个想法是当它们再次变回时，它们应该重播:https://jsfiddle.net/lj_tang/qynvg44b/11/

Answer 1

使用 jQuery 而不是 css 更改图像。该版本将确保每次都有不同的 url。现在它强制加载!

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+')');
}

如果您在函数中运行上述代码，请将++v 放在 if 语句下。

最好不要在 css 中重复代码。

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