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