Jquery의 height() 및 width()를 사용하여 동적으로 삽입된 IMG의 너비와 높이를 계산하는 문제에 대해

먼저 현상을 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

<script> <BR>$(document).ready(function() { <BR>$("#cc").append("< div id='aa ' style='width:200px;height:200px;' />"); <BR>alert($("#aa").width()); <BR> }); <BR><BR> 결과: 200 <BR>모든 브라우저에서 올바른 결과를 얻음<BR><br>삽입된 요소를 IMG로 변경 <br><BR><div class="codetitle"><span><a style="CURSOR: pointer" data="15265" class="copybut" id="copybut15265" onclick="doCopy('code15265')">코드 복사<U> 코드는 다음과 같습니다. <div class="codebody" id="code15265"><div id="cc"></ div> <BR>&lt ;script> <BR>$(document).ready(function() { <BR>$("#cc").append("<img id='aa' src='http: //www.jb51.net/images/logo.gif' / alt="Jquery의 height() 및 width()를 사용하여 동적으로 삽입된 IMG의 너비와 높이를 계산하는 문제에 대해" >"); <BR>alert($("#aa").width()); <BR>}); <BR></ script> <BR><BR> (참고: image1.jpg의 실제 너비는 693입니다.) <BR><br>결과는 다음과 같습니다. <br>Opera:34 <BR>Firefox:0 <BR>IE :28 <BR>Chrome:0 <BR>Safari:0 <BR><br>F5로 새로고침하면 결과는 다음과 같습니다. <br>Firefox:693 <BR>IE:693 <BR>Opera:693 <BR>Chrome :0 <BR>Safari:0 <BR>Safari와 Chrome은 항상 0입니다. <BR><br> 이미지가 로드되지 않거나 렌더링되지 않을 때 계산된 이미지의 너비와 높이가 올바르지 않다는 점을 이해해야 합니다. 새로 고침 후에 캐시가 있어야 결과가 정확하지만 Chrome은 왜 <br> <br> 및 Safari는 항상 0인가요? 게다가 IE와 OPERA는 실제로 처음부터 오류값을 계산했습니다. <br>다음과 같이 변경하세요. <BR><BR><div class="codetitle"><span><a style="max-width:90%" data="93239" class="copybut" id="copybut93239" onclick="doCopy('code93239')">코드 복사<U> 코드는 다음과 같습니다. <div class="codebody" id="code93239"> <div id="cc"> <BR><script> <BR>$(document).ready(function() { <BR>$("#cc").append( " <img id='aa' src='http://www.jb51.net/images/logo.gif' / alt="Jquery의 height() 및 width()를 사용하여 동적으로 삽입된 IMG의 너비와 높이를 계산하는 문제에 대해" >") <BR>window.setTimeout(function(){alert($(" # aa").width()); },100); <BR>}); <BR></script>

이 문제를 해결한 적이 있거나 이에 대한 자세한 내용을 알고 계십니까? 문제가 있으신가요? 빅버드 아시는 분 조언 좀 부탁드립니다.

코드 복사 코드는 다음과 같습니다.

$( document).ready(function() {
$("#cc").append("");
$(" #aa").load( function(){
alert($("#aa").width()
}).attr("src", "http://www.jb51.net/ Images/logo.gif") ;
});