Flask Web应用触发函数加载时loading动画隐藏页面其余所有内容问题

核心问题说明 #

你当前的实现逻辑是触发加载后直接将整个#content容器设置为display: none，包含提交按钮在内的所有内容都会被从渲染流中移除，#loading元素是相对于整个页面绝对定位的，自然无法对应已经消失的提交按钮位置进行调整。

具体修改步骤 #

1. 调整HTML结构
   将<div id="loading"></div>从body头部移动到提交按钮的同级位置，同时给按钮的父元素添加相对定位属性：

<p style="position: relative;">
    <input class="abc" type="submit" value="Submit" onclick="loading()" >
    <div id="loading"></div>
</p>

2. 修改CSS样式
   调整#loading的定位规则，改为相对于父元素定位到按钮左下方：

div#loading {
    position: absolute;
    /* 移除原有margin: auto、top/bottom/left/right: 0的全局居中规则 */
    top: 100%; /* 定位到父元素底部，即按钮下方 */
    left: 0; /* 和父元素左边缘对齐，即按钮左侧 */
    margin-top: 8px; /* 可自行调整数值控制和按钮的上下间距 */
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    display: none;
    background-image: url("../loader.gif");
    cursor: wait;
}

3. 调整JS加载逻辑
   不要直接隐藏整个#content容器，改为隐藏其他内容但保留按钮占位，同时防止重复提交：

function loading(){
    $("#loading").show();
    // 不要用display:none，改用visibility:hidden保留元素占位空间
    $("#content").css("visibility", "hidden");
    // 单独将提交按钮和加载动画设为可见
    $(".abc, #loading").css("visibility", "visible");
    // 禁用提交按钮防止重复点击
    $(".abc").prop("disabled", true);
}

如果你的页面加载完成后会刷新或者跳转，不需要额外处理；如果是异步提交，请求返回后需要手动恢复状态：

// 异步请求完成后执行即可复位
$("#loading").hide();
$("#content").css("visibility", "visible");
$(".abc").prop("disabled", false);

内容的提问来源于stack exchange，提问作者Sambam