JavaScript加载器图片显示后无法跳转页面 代码问题排查求助

我正在编写一段JavaScript代码，需求为：点击按钮时显示loader image，持续20秒后跳转至另一页面。目前加载器图片可正常渲染，但无法完成页面跳转。以下是我的代码，请帮我排查错误：

jQuery('#double_click_submit').click(function(event) {
    event.preventDefault();
    jQuery('body').html('<img src="https://xxxxxx/wp-content/uploads/2023/04/Loading_icon.gif">'); // showing loader image
                

    jQuery(this).text("Please wait..Image Generating");
    GrabzIt("NjdiMmRiM2RjZWYyNGViMzkzNDA4MDdjZWRlM2RjMGU=").ConvertPage({"target": "#back-ground", "bheight": -1, "height": -1, "width": -1}).Create();
    setTimeout(function() { 
        var screenshot = jQuery("#screenshot img").attr('src');
        jQuery("#main_select_file").val(screenshot);
        jQuery('#wall_form_add').submit();
    }, 20000);
}

核心错误点 #

• DOM元素被完全清除：你用jQuery('body').html(...)把整个页面的body内容替换成了loader图片，这直接删掉了页面里的#screenshot、#main_select_file、#wall_form_add这些关键元素。20秒后执行定时器代码时，根本找不到这些元素，自然无法提交表单跳转。
• 按钮文本修改无效：同样因为body内容被替换，jQuery(this)指向的按钮已经被移除，修改文本的代码不会生效。
• 语法错误：代码最后缺少闭合的)，导致整个点击事件绑定逻辑存在语法问题，可能直接阻断后续代码执行。

修复后的代码 #

jQuery('#double_click_submit').click(function(event) {
    event.preventDefault();
    
    // 不替换整个body，而是添加遮罩层显示loader
    jQuery('body').append('<div class="loader-overlay"><img src="https://xxxxxx/wp-content/uploads/2023/04/Loading_icon.gif"></div>');
    // 禁用按钮+修改文本，防止重复点击
    jQuery(this).text("Please wait..Image Generating").prop('disabled', true);

    GrabzIt("NjdiMmRiM2RjZWYyNGViMzkzNDA4MDdjZWRlM2RjMGU=").ConvertPage({"target": "#back-ground", "bheight": -1, "height": -1, "width": -1}).Create();
    
    setTimeout(function() { 
        var screenshot = jQuery("#screenshot img").attr('src');
        // 先判断是否成功获取到截图地址
        if (screenshot) {
            jQuery("#main_select_file").val(screenshot);
            jQuery('#wall_form_add').submit();
        } else {
            // 处理截图生成失败的情况
            alert("截图生成失败，请重试");
            jQuery('.loader-overlay').remove();
            jQuery('#double_click_submit').text("重新生成").prop('disabled', false);
        }
    }, 20000);
}); // 补上闭合括号

/* 可选：添加loader遮罩的CSS样式 */
/*
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
*/

修复说明 #

1. 用append添加loader遮罩，保留原页面所有DOM元素，确保定时器能找到表单和截图元素。
2. 给按钮添加disabled属性，避免用户重复点击触发多次逻辑。
3. 补上缺失的闭合括号，修复语法错误。
4. 增加截图地址的判断，处理生成失败的异常场景，提升用户体验。

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