如何延迟“onsubmit”事件直到加载某些内容？

Question

我在onSubmit 的form 事件中遇到问题。

我正在使用 javascript image 元素向另一个网页发送一些跟踪信息（参数在 GET 中）。

但是当我尝试加载 image（通过 src 属性）时，页面会在 image 的请求发生之前刷新（或立即中止）。

这样，不会向外部跟踪页面发送任何信息。我如何在这个submit 处理程序中等待load 的image？

编辑： 还有一点我错过了，其他事件可以在同一个地方（例如验证等）

Answer 1

这应该可以正常工作：

var img = document.getElementById('image'),
    form = document.getElementById('form');

img.addEventListener('load', function (){
    window.imageIsLoaded = true;
    if(window.submitForm === true){
        form.submit();
    }
}, false);

form.addEventListener('submit', function (e){
    window.submitForm = true;
    if(window.imageIsLoaded !== true){
        e.preventDefault();
        return false;
    }
}, false);​

Demo

Answer 2

如果需要，不使用全局变量自动提交表单的另一种方法：

document.getElementById('yourFrm').addEventListener('submit',(function()
{
    'use strict';
    var imgLoaded,img,tmpImgLoad;
    imgLoaded = false;
    img = document.getElementById('yourImg');
    tmpImgLoad = function ()
    {
        imgLoaded = true;
        img.removeEventListener('load',tmpImgLoad,false);//remove obsolete listener?
    };
    img.addEventListener('load',tmpImgLoad,false);
    return function(e)
    {
        if (!imgLoaded)
        {
            tmpImgLoad = function()
            {
                imgLoaded = true;
                img.removeEventListener('load',tmpImgLoad,false);
                document.getElementById('yourForm').submit();
            };
            e.preventDefault();
            e.stopPropagation();
        }
    };
})(),false);

此代码将加载事件侦听器绑定到您的图像元素，将闭包变量设置为 true。如果在提交表单时该变量为 false，则 load 事件的回调也将更改为提交表单。

我承认这有点复杂，但你知道：全局变量并不是解决这个问题的唯一方法。

也刚刚通过 JSLint。一些微小的调整以及“容忍混乱的空白”和“假设浏览器”，这段代码完全没有任何警告或错误就通过了