确认后显示gif，直到在javascript中完成加载

我有一个包含提交按钮的表单。单击“提交”按钮后，将显示确认弹出窗口。一旦满足确认条件，就会发生HTTP post。然而，有时这篇文章可能需要一段时间。因此，我希望在满足确认条件后显示加载gif，直到post响应返回，此时页面已经在重新加载。

我建议使用一个元素作为某种模式，然后将css属性设置为从

隐藏

和

可见

然后，您可以将事件处理程序添加到按钮按下和请求中，以隐藏或显示此元素

请参见下面的示例：

const requestButton=document.querySelector（'.request'）；
const yes=document.querySelector（'.yes'）；
const no=document.querySelector（'.no'）；
const confirmation=document.querySelector（'.confirmation'）；
常量加载=document.querySelector（'.load'）；
const content=document.querySelector（'.content'）；
requestButton.addEventListener（'单击'，事件=>{
confirmation.style.visibility='visible'；
});
是。addEventListener（'单击'，事件=>{
//实际上，您可以使用'fetch'或jquery ajax发出请求，而不是setTimeout
loading.style.visibility='visible'；
confirmation.style.visibility='hidden'；
window.setTimeout（（）=>{
//此回调中的代码与“success”回调中的代码相同
//即，此代码应在请求完成时运行
loading.style.visibility='hidden'；
const p=document.createElement（'p'）；
p、 innerText='Loaded！'；
内容：儿童（p）；
}, 2000);
});
否。addEventListener（'单击'，事件=>{
confirmation.style.visibility='hidden'；
});
。隐藏中心{
位置：绝对位置；
身高：100%；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
排名：0；
左：0；
可见性：隐藏；
}
.莫代尔{
背景颜色：浅灰色；
填充：3em；
}

装东西？
你确定吗？
对
不
加载。。。
添加一个在单击按钮时显示图像的事件处理程序，然后添加另一个事件处理程序以在响应返回时删除图像。；）你能举个简单的例子吗？确认上没有事件处理程序。。yo可以这样做，我在我的web应用程序上使用了这个，提交后做验证是否有效提交表单并显示此加载屏幕，表单提交后重定向用户确认页面。完成已单击“提交”按钮。在这一点上，将进行一系列的表单验证。如果未通过，将出现确认对话框，告诉他们修复错误。如果通过，将出现确认对话框，询问他们是否确定要提交。这里是我想要加载的地方，因为服务器响应可能需要一段时间。回复回来后，会出现另一个确认对话，告诉他们成功了。我会试一试！谢谢大家!@slashnburn阅读上面的评论，看起来您的应用程序不是一个单页应用程序（我现在只是假设）。现在需要将事件侦听器附加到表单。不要将事件侦听器添加到按钮单击中，而是将其添加到
submit
事件的表单中，如下所示：
yourForm.addEventListener（'submit'，event=>{/*code to show loading*/}）
。而且，您可能不需要在返回的请求中添加事件侦听器，因为新文档将替换当前文档更新答案以反映我在评论中所说的内容感谢这段代码！我将class=“request”放入提交按钮。现在，当我单击yes/no时，如何返回true/false？它总是提交页面。