交换时如何重新加载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，因为不断读取该值从而再次替换它，但我只需要它一次

更新

这是小提琴。这是正在发生的事情......这个想法是当它们再次变回时，它们应该重播：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%;
}