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

Question

我有问题，onSubmit如果发生form.

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

但是当我尝试加载该image（通过src属性）时，页面刷新比请求image发生（或立即中止）更快。

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

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

Answer 1

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

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 传递了很多东西。一些微小的调整和“容忍混乱的空白”和“假设浏览器”这个代码完全没有任何警告或错误通过

Answer 2

这应该可以正常工作：

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);​

演示