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

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

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

< div id="cc ">

<script> <br>$(document).ready(function() { <br>$("#cc").append("< div id='aa ' style='width:200px;height:200px;' /></div>"); <br>alert($("#aa").width()); <br> }); <br><br> </div>결과: 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></u></a> 코드는 다음과 같습니다.</span></div> <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' />"); <br>alert($("#aa").width()); <br>}); <br></ script> <br><br> </div> (참고: 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="CURSOR: pointer" data="93239" class="copybut" id="copybut93239" onclick="doCopy('code93239')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code93239"> <div id="cc"></div> <br><script> <br>$(document).ready(function() { <br>$("#cc").append( " <img id='aa' src='http://www.jb51.net/images/logo.gif' />") <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") ;
});