Question

我的结帐购物车在提交（2）之后显示（1）“处理订单...”的动画，并且正在以PHP脚本处理该卡。但是，当用户到达“接受订单”页面时，会触发错误，并按下后退按钮。 “处理订单...”动画仍然显示。

（1）处理显示如下所示：

<div style="position:absolute;display:none;" id="animation">
    <img src="animation.gif"/>
</div>

（2）提交按钮时，使用了javascript：

onClick="document.getElementById('animation').style.display='block';
         document.the_form.submit();"

因此，单击按钮，显示动画，提交表单，处理卡片，用户在新页面上。

当用户点击回来时，我们应该期待没有动画的页面。但是，不会触发onLoad，并保存动画的最后一个状态（显示）。

知道如何在用户返回页面时删除动画吗？

Answer 1

受到Adam A评论的启发，你可以在用户离开页面时隐藏动画（通过表单提交是正常的路线，我怀疑）所以如果/当回到页面时，动画不会显示

实现此目的的一种方法是将隐藏代码添加到HTML正文的 onunload 事件中。

<body onunload="document.getElementById('animation').style.display='none';">

Answer 2

在大多数现代浏览器中，单击后退不会重新加载页面，它只会在内存中显示它，因为它最后记住它（因为这可能是所需的行为）。

在我有限的UI设计经验中，我不确定为什么您希望用户在提交订单后点击“后退”按钮，而是应该提供一个链接，将他们转发到他们希望的下一个任务完成或转发到具有有用任务的新页面，只需在某处显示“谢谢，您的订单被接受”的消息。