무언가가로드 될 때까지 어떻게 "onsubmit"이벤트를 지연시킬 수 있습니까?

Question

form의 onSubmit 이벤트에 문제가 있습니다.

JavaScript 페이지 image을 사용하여 다른 웹 페이지로 일부 추적 정보를 보내고 있습니다 (매개 변수는 GET에 있음).

image (src 속성을 통해)로드하려고하면 페이지가 image에 대한 요청이 수행되는 (또는 즉시 중단됨) 것보다 빨리 새로 고쳐집니다.

이렇게하면 외부 추적 페이지로 정보가 전송되지 않습니다. 이 에 대한 submit 처리기에서 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 인 경우,로드 이벤트의 콜백도 양식을 제출하도록 변경됩니다.

이것은 좀 더 복잡하지만, 여러분도 알다시피 : 전역이이 문제를 해결할 수있는 유일한 방법은 아닙니다.

그냥 JSLint를 통해 많은 정보를 전달했습니다. 이 코드는 경고 또는 오류없이 전달됩니다.