如何在JavaScript中点击按钮后显示加载图片（Loader Image）

步骤1：添加加载图片的HTML元素 #

先在页面合适位置（比如按钮周边）添加一个默认隐藏的加载图片元素：

<img id="loader" src="https://xxxxxxxxx/wp-content/uploads/2023/04/Loading_icon.gif" style="display:none;" alt="加载中">

步骤2：修改jQuery点击事件代码 #

在你现有的点击事件逻辑里，加入显示加载图片的代码：

jQuery('#double_click_submit').click(function(event) {
    // 若按钮是表单提交按钮，先阻止默认提交行为
    event.preventDefault();
    // 显示加载图片
    jQuery('#loader').show();

    // 这里可以补充你的业务逻辑，比如AJAX请求
    // 示例：请求完成后隐藏加载图片
    /*
    jQuery.ajax({
        url: '你的请求地址',
        method: 'POST',
        data: 你的请求数据,
        success: function(response) {
            jQuery('#loader').hide();
            // 处理请求返回结果
        },
        error: function() {
            jQuery('#loader').hide();
            // 处理请求错误
        }
    });
    */
});

可选方案：动态创建加载图片 #

如果不想提前添加HTML元素，也可以通过代码动态生成加载图片：

jQuery('#double_click_submit').click(function(event) {
    event.preventDefault();
    // 动态创建加载图片并插入到页面
    var loader = jQuery('<img>', {
        src: 'https://xxxxxxxxx/wp-content/uploads/2023/04/Loading_icon.gif',
        alt: '加载中',
        id: 'dynamic-loader'
    }).appendTo('body'); // 可指定插入到特定容器，比如jQuery('#button-wrapper')

    // 业务逻辑完成后移除或隐藏图片
    /*
    jQuery.ajax({
        // 请求配置
        complete: function() {
            loader.remove(); // 或 loader.hide()
        }
    });
    */
});

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