Question

我最近发布了一个网站，上面有一个简单的火箭熊猫SVG动画。一旦用户向下滚动，图像就会变为另一个SVG，并且熊猫的动画会上升并远离屏幕。

网站：https://www.jonnyekholm.fi

我使用这个简单的脚本来实现它：

bool func();

int main()
{
     statement1();
     while( func() ) {}
     statement5();
}

bool func()
{
     statement2();
     do
     {
         statement3();
         if ( condition1() )
         {
             return true;
         }
         statement4();
     } while( condition2() )
     return false;
}

这适用于Chrome。

这首先适用于Firefox。但如果你重新加载页面并再次向下滚动，那么熊猫就会消失。在Safari中也会发生同样的事情。

我也在同一页面上使用这个脚本，让熊猫稍后在屏幕上移动：

<div style="left:10%;" id="rocket" >
<img width="30%" height="auto" src="https://www.aaltowave.com/img/RocketPanda.svg" />
</div>

<script>
jQuery(window).scroll(function() {
jQuery( "img[src='https://www.aaltowave.com/img/RocketPanda.svg']" ).attr("src","https://www.aaltowave.com/img/RocketPanda2.svg");
});

</script>

这适用于Chrome。

在Safari上，这不会在重新加载时执行，就像上一个动画一样。

在Firefox上，除了一两次外，动画根本不会发生。这告诉我该脚本确实可以在firefox上运行，但它在奇怪的基础上执行。

如何在Firefox上显示熊猫动画？

如果有人能帮助我解决这个问题，我将非常感激。先感谢您！

Answer 1

根据happymacarts建议，这很可能是缓存问题。在重新加载时，动画被加载，但是在它已经离开屏幕的最后一帧。必须强制重新加载图像才能成功。

为了能够重新加载图像并绕过缓存，我在URL中添加了一个唯一的查询参数并将脚本放在一起：

jQuery(window).scroll(function() {
jQuery( "img[src='https://www.aaltowave.com/img/RocketPanda.svg']" ).attr("src","https://www.aaltowave.com/img/RocketPanda2.svg?t=" + new Date().getTime());
jQuery( "img[src='https://www.aaltowave.com/img/still2.svg']" ).attr("src","https://www.aaltowave.com/img/movement22.svg?t=" + new Date().getTime());
});

Chrome：像魅力一样工作 Safari：像魅力一样工作 Firefox：这解决了第一个动画的问题，但第二个只显示用户是否向下滚动到该位置然后重新加载页面。不在任何其他场合。仍在研究第二部动画的解决方案......

在Firefox上重新加载页面后，jQuery停止工作

1 个答案: