求助：点击按钮后Bootstrap加载图标无法提前显示的问题

你遇到的核心问题是PHP的同步执行特性导致的：当用户点击按钮后，服务器会先完整执行两个Perl脚本（耗时约10秒），才会把包含加载动画和图片的HTML全部返回给浏览器。这时候浏览器才会渲染这两个元素，你的jQuery代码才开始执行——所以加载动画刚显示就立刻淡出，和图片同时出现，完全达不到你想要的“先显示加载动画，等脚本跑完再显示图片”的效果。

下面是完整的修复方案，分前端和后端两部分调整：

1. 调整前端页面结构与JS逻辑 #

把按钮、加载动画、图片容器提前放在页面上（默认隐藏加载动画和图片），通过AJAX异步触发后端脚本执行，这样加载动画可以立刻显示，等脚本执行完成后再切换为图片。

<!-- 页面上的按钮和元素 -->
<button id="trigger-scripts" class="btn btn-primary">生成图片</button>

<!-- 加载动画（默认隐藏） -->
<div class='spinner-grow' role='status' style="display:none;">
  <span class='sr-only'>Loading...</span>
</div>

<!-- 图片容器（默认隐藏） -->
<div class='image' style="display:none;">
  <img src='figure.png' class='mx-auto d-block' style='width:800px; height:800px;'>
</div>

<!-- jQuery脚本 -->
<script>
$(function() {
  $("#trigger-scripts").click(function() {
    // 禁用按钮，防止重复点击
    $(this).prop("disabled", true);
    // 显示加载动画
    $(".spinner-grow").show();
    
    // 异步请求后端执行Perl脚本
    $.ajax({
      url: "execute-scripts.php", // 单独的后端处理文件
      type: "POST",
      timeout: 15000, // 设置超时（比脚本执行时间长一点，比如15秒）
      success: function() {
        // 脚本执行完成：先淡出加载动画，再淡入图片
        $(".spinner-grow").fadeOut(500, function() {
          $(".image").fadeIn(500);
          // 恢复按钮可用状态
          $("#trigger-scripts").prop("disabled", false);
        });
      },
      error: function() {
        // 处理错误（比如脚本执行超时或失败）
        $(".spinner-grow").fadeOut(500);
        alert("图片生成失败，请重试！");
        $("#trigger-scripts").prop("disabled", false);
      }
    });
  });
});
</script>

2. 创建单独的后端处理文件（execute-scripts.php） #

把执行Perl脚本的逻辑抽出来，专门处理AJAX请求，这样前端可以在脚本执行期间保持交互，显示加载状态：

<?php
// 只处理POST请求
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    exit;
}

// 执行两个Perl脚本
shell_exec("perl myscript1.pl");
shell_exec("perl myscript2.pl");

// 可选：确保图片文件已经生成（比如检查文件是否存在，或者等待生成完成）
// $maxWait = 12; // 最多等12秒
// $waitTime = 0;
// while (!file_exists('figure.png') && $waitTime < $maxWait) {
//     sleep(1);
//     $waitTime++;
// }

// 返回成功响应
echo "done";
http_response_code(200);
?>

为什么原来的方法无效？ #

再帮你理一遍逻辑：

• 原代码中，用户点击按钮后，浏览器发送POST请求到服务器
• 服务器必须先把两个Perl脚本跑完（10秒），才会把包含<div class='spinner-grow'>和<div class='image'>的HTML输出给浏览器
• 浏览器收到HTML后，才会渲染这两个元素，然后执行你的jQuery代码
• 这时候加载动画刚出现在页面上，就立刻执行fadeOut，看起来就是和图片同时显示，完全没有“加载中”的等待效果

额外优化建议 #

• 防止重复点击：上面的代码已经给按钮加了禁用状态，避免用户多次点击导致重复执行脚本
• 图片缓存问题：如果脚本生成的图片文件名固定（figure.png），浏览器可能会缓存旧图片，可以给图片URL加时间戳，比如<img src='figure.png?<?=time()?>' ...>，确保每次都加载最新的图片
• 脚本执行状态：如果Perl脚本可能执行失败，可以在后端检查脚本的返回值，比如用exec()代替shell_exec()获取退出码，这样可以在AJAX响应中返回执行结果，前端根据结果提示用户

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