My checkout cart displays (1) an animation for “Processing Order…” after the ‘s been (2) submitted and the card is being processed in a php script. However, there’s a bug triggered when the user has reached the “order accepted” page, and pressed the back button. The “Processing Order…” animation is still displayed.
(1) The processing display is shown like:
<div style="position:absolute;display:none;" id="animation">
<img src="animation.gif"/>
</div>
(2) When the button is submitted, the javascript used:
onClick="document.getElementById('animation').style.display='block';
document.the_form.submit();"
So, the button is clicked, the animation displayed, the form submitted, and the card is processed, and the user is on a new page.
When the user clicks back, we should expect a page without the animation. But, onLoad isn’t triggered, and the last state of the animation (displayed) is saved.
Any idea how to remove the animation when the user returns to the page?
Inspired by Adam A’s comment, you could hide the animation when the user is leaving the page (through form submit is the normal route, I would suspect) so if/when coming back to the page, the animation isn’t shown.
One way to achieve this is adding the hiding code to HTML body’s onunload event.