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

Question

我最近发表了一个网站，一个简单的SVG动画熊猫火箭上。一旦用户向下滚动，图像就会改变为另一个SVG，熊猫的动画会从屏幕上上下移动。

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

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

<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上运行得很好。

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

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

<div id="trigger"></div>
<img src="https://www.aaltowave.com/img/still2.svg"/>
<script>
jQuery(function() {
var $window = jQuery(window);
var endpoint = jQuery("#trigger").offset().top - $window.height();
$window.on('scroll', function() {
if ( (endpoint) < $window.scrollTop() ) {
jQuery( "img[src='https://www.aaltowave.com/img/still2.svg']" ).attr("src","https://www.aaltowave.com/img/movement22.svg");} });});</script>

这在Chrome上运行得很好。

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

然而，在Firefox上，除了一两次以外，动画根本不发生。这告诉我，这个脚本实际上可以在firefox上工作，但是它在奇怪的基础上执行。

如何使熊猫动画显示在火狐上？

如果有人能帮我解决这个问题，我将非常感激。提前谢谢你！

Answer 1

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

为了能够重新加载映像并绕过缓存，我在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:很有魅力

火狐：解决了第一个动画的问题，但是第二个只有当用户滚动到这个位置然后重新加载页面时才会出现。在任何其他场合都不行。还在研究第二部动画的解决方案.