jQuery stops working after page reload on Firefox

Question

I recently published a website with a simple SVG animation of a Panda on a rocket. As soon as the user scrolls down, the image changes to another SVG with an animation of the panda going up and away from the screen.

The website: https://www.jonnyekholm.fi

I'm using this simple script to make it happen:

<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>

This works fine on Chrome.

This also works on Firefox, at first. But if you reload the page and scroll down again then the panda just disappears. Same thing happens in Safari.

Im also using this script on the same page, to make the panda move across the screen at a later point:

<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>

This works fine on Chrome.

On Safari this doesn't execute on reload, just like with the previous animation.

On Firefox however, the animation doesn't occur at all except for one or two occasions. This tells me that the script does in fact work on firefox, but it executes on a weirdly basis.

How can I make the panda animations show up on Firefox?

I would appreciate it very much if anybody could help me with solving this problem. Thank you in advance!

Answer 1

Based upon happymacarts suggestions, this is most likely a cache issue. On reload the animation is loaded, but at the last frame where it is already off the screen. One must force an image reload for this to succeed.

To be able to reload the image and bypass the caching I added a unique query parameter to the URL and put the scripts together:

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: Works like charm
Safari: Works like charm
Firefox: This solves the issue for the first animation, but the second one only shows up if the user has scrolled down to the location and then reloads the page. Not in any other occasion. Still working on a solution for the second animation...