Jquery 表单提交时按钮图像中断

我试图在提交表单时更改按钮元素中图像的src。由于某种原因，表单提交时新图像src无法加载（chrome中的断开链接图像，FF中没有任何内容），但是如果我使用

返回false我可以正确地看到图像交换。我尝试过使用背景图像，这似乎是可行的，但它会弄乱默认的用户代理按钮样式

这是我正在使用的代码和一个提琴示例（将
return true；
更改为
return false；
以查看图像是否正常工作）


你知道为什么提交的表单会影响图像吗？我相信这很简单，但它让我困惑了很长一段时间。提前感谢。
您需要在更改图像之前停止表单提交，然后在完成交换后提交表单。为什么？表单提交将在图像替换期间继续，因此您需要使其停止，直到准备就绪

$(document).ready( function () {
    $( "#testForm" ).submit( function (e) {
        e.preventDefault(); // stops form submission long enough to swap
        var submitBtn = $( "#testForm" ).find( "button" );
        submitBtn.attr( "disabled", true ).find( "img" )[0].src = "https://cdn1.iconfinder.com/data/icons/silk2/car.png";
        $("#testForm").submit(); // submits it when ready
    });
 });

处理此问题的首选方法是将submit更改为常规按钮并使用click事件，如下所示：

$(document).ready( function () {
    $( "#testFormButton" ).click( function (e) {
        $( "#testFormButton" ).attr( "disabled", true ).find( "img" )[0].src = "https://cdn1.iconfinder.com/data/icons/silk2/car.png";
        $("#testForm").submit(); // submits it when ready
    });
 });

这样你就不会在你不想要的时候让表单行为不端。您可以控制它何时提交。工作方式完全相同，但您可以先完成所有需要完成的事情。
表单的提交优先于图像加载，因此它从不加载。您必须加载图像，然后手动提交表单：

$(document).ready( function () {
    var submitted = false;
    $( "#testForm" ).submit( function (e) {
        if (submitted) return;
        e.preventDefault();

        var submitBtn = $( "#testForm" ).find( "button" );
        var img = submitBtn.attr( "disabled", true ).find( "img" )[0];

        img.onload = function() {
            $("#testForm").submit();
        };

        submitted = true;
        img.src = "https://cdn1.iconfinder.com/data/icons/silk2/car.png";
    });
});

但是，表单提交（通常）会导致页面重定向。如果你不想发生这种情况，那么考虑XMLHtpRestQuest.
你需要截取提交，然后在交换之后再次提交表单。
$(function () {
    var submitted = false;
    $( "#testForm" ).submit(function (e) {
        var frm = this;
        if (!submitted) {
            e.preventDefault();
            var submitBtn = $( "#testForm" ).find( "button" );
            var img = submitBtn.attr( "disabled", true ).find( "img" );
            img[0].src = "https://cdn1.iconfinder.com/data/icons/silk2/car.png";
            submitted = true;
            img.load(function() {
                $(frm).submit();
            });
         }
    });
});

问题不在于浏览器不显示图像。事实上，一旦图像被缓存，您就可以在提交表单之前看到它

问题在于，通常在下载图像之前提交表单（并加载新页面）

如果要确保它将被显示，可以使用
preventDefault
避免提交表单，并向提交表单的图像添加
load
事件处理程序：

$( "#testForm" ).submit( function (e) {
    var that = this;
    e.preventDefault();
    $( "#testForm" ).find( "button" )
        .attr( "disabled", true )
        .find( "img" )
            .on('load', function(){ that.submit(); })
            .attr('src', "https://cdn1.iconfinder.com/data/icons/silk2/car.png");
});

您也可以考虑使用超时来确保图像在一段时间内显示：
.on('load', function(){ setTimeout(that.submit, 1000); })

意识到表单提交中断了图像的加载，我最终在页面加载事件中使用了类似于
$（'的东西来预加载图标。这现在似乎可以可靠地显示图像（虽然动画gif im似乎没有在FF中循环，但这可能是另一个问题）.
return
语句将在那里停止函数。
return false；
不起作用吗？您永远不会超过return语句。最后的submit（）仍将运行您定义的处理程序，该处理程序将命中
e.preventDefault（）
一次又一次。检测到无限递归。更好的方法是不使用提交按钮，而是使用普通按钮并将其更改为单击（）事件，这样您就可以做您需要做的事情，并在准备就绪后控制最后的提交。您确实意识到提交表单需要重新加载页面，因此在页面再次加载后交换图像没有什么区别？@adeneo不一定。如果表单的
目标
属性设置为另一个窗口/iframe？@rvighne-I怎么办看不到目标属性吗？@adeneo我也看不到，但这是一种临时性的事情（注意
操作
是如何设置为
#
）所以他们可能已经删除了它。毕竟，您不能从JSFIDLE引用其他窗口。@rvighne-但是您肯定可以让表单在JSFIDLE中打开一个新窗口，而且表单提交到一个新选项卡似乎很奇怪。尝试得很好，但这仍然不起作用，因为图像加载是异步的：表单将在图像之前提交开始加载。@rvighne-您的将不起作用，因为触发表单jQuery提交处理程序仍然会阻止默认操作。@adeneo-Ouch。捕捉得好！但我的参数仍然有效。作为旁注，执行
this.submit（）
触发本机处理程序并避免默认问题。我已经更新了我的答案，以实际正确工作并等待映像加载。这将进入一个无休止的循环。
setTimeout
也没有任何作用。@rvighne这不是一个无休止的循环，因为（在vanilla js中，与jQuery不同）
.submit（）
不会触发任何
submit
事件！并且
setTimeout
延迟提交表单，以便在更长的时间内查看图像。哦，我明白了。我不知道这是否属实，但现在我看到您没有触发jQuery的submit（）。谢谢@rvighne，很难选择接受哪一个答案，但这一个最简洁地解释了图像加载因表单提交而停止/中断。
$( "#testForm" ).submit( function (e) {
    var that = this;
    e.preventDefault();
    $( "#testForm" ).find( "button" )
        .attr( "disabled", true )
        .find( "img" )
            .on('load', function(){ that.submit(); })
            .attr('src', "https://cdn1.iconfinder.com/data/icons/silk2/car.png");
});

.on('load', function(){ setTimeout(that.submit, 1000); })