如何才能延遲「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); 

該代碼將一個加載事件偵聽器綁定到您的image元素，該元素將閉包變量設置爲true。如果在提交表單時該變量爲false，則更改加載事件的回調以提交表單。

我會承認這有點複雜，但您知道：全局變量不是解決這個問題的唯一方法。

剛剛通過JSLint也通過了很多。一些微小的調整和「容忍凌亂的空白」和「asume瀏覽器」這個代碼通過沒有任何警告或錯誤