onload 완료 시점에 대해 질문드립니다.

Question

자바스크립트 소스부분 입니다. var imgCheck &#61; false; var img &#61; new Image(); img.src &#61; _URL.createObjectURL(file); img.onload &#61; function() { if(img.width &#61;&#61; 720 && img.height &#61;&#61; 720) imgCheck &#61; true; else imgCheck &#61; false; alert(img.width&#43;&#34; &#34;&#43;img.height); // [1] } alert(&#34;ㅋㅋㅋㅋㅋㅋ1
&#34;&#43;img.width&#43;&#34; &#34;&#43;img.height); // [2] if(!imgCheck) { alert(&#34;이미지 사이즈는 720px * 720px 이어야 합니다.&#34;); // [3] return; }용도는 이미지 파일을 업로드 할때 이미지 사이즈(가로,세로)를 측정해서 지정된 사이즈가 아니면 alert 메시지를 띄우는 기능입니다.코드가 순서에 맞게 딱딱 진행 되면 문제가 없는데 onload 부분이 완료되기도 전에 [2] alert 부분이 실행됩니다.원래라면 [1]alert -> [2]alert ->(조건에 맞는경우) [3]alert 이 떠야 하는데, [2]alert -> [3]alert -> [1]alert 이렇게 뜹니다. 혹시 onload가 완료된 이후 다음 코드부분([2]부분)을 실행하게 하는 방법이 있나요??

code_monkey · Accepted Answer

간단한 거면 콜백으로 넣어도 되지만 alert 들어가 있는 부분에 function 호출해서 거기서 처리하세용

code_monkey · Answer

var imgCheck &#61; false; var img &#61; new Image(); img.src &#61; _URL.createObjectURL(file); img.onload &#61; function() { if(img.width &#61;&#61; 720 && img.height &#61;&#61; 720) alert(&#34;ㅋㅋㅋㅋㅋㅋ1
&#34;&#43;img.width&#43;&#34; &#34;&#43;img.height); // [2] else alert(&#34;이미지 사이즈는 720px * 720px 이어야 합니다.&#34;); // [3] }

noob · Answer

&#64;何ごれ 님 답변 감사합니다.저 소스 밑에도 올바른 이미지 사이즈(720*720)인 경우 동작해야 하는 소스가 있는데 그 부분이 onload가 끝나기전에 호출이 됩니다. 그래서 onload가 끝날때까지 기다린 후 다음 소스코드를 실행하는 방법이나 다른 좋은 방법은 없는지 해서 질문드렸습니다 ㅠㅜ

redeye0922 · Answer

callback 처리 하셔서 해보는건 어떨까요?

onload 완료 시점에 대해 질문드립니다.

4개의 답변

Q&A 목록