交换时如何重新加载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');
        }

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

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

背景切换有效。但是，当我向后滚动并再次添加 class 时，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%;
}

交换时如何重新加载gif？

How to reload the gif when exchanged?

javascript

css

jquery

if-statement

gif