about using the height (), Width () of jquery to compute the wide-height problem of dynamically inserted IMG tags _jquery

First look at the phenomenon:

Copy Code code as follows:

<div id= "CC" ></div>
<script>
$ (document). Ready (function () {
$ ("#cc"). Append ("<div id= ' AA ' style= ' width:200px;height:200px; '/></div>");
Alert ($ ("#aa"). width ());
});
</script>

Results are: 200
All browsers get the right results

Change the inserted element to img

Copy Code code as follows:

<div id= "CC" ></div>
<script>
$ (document). Ready (function () {
$ ("#cc"). Append ("Alert ($ ("#aa"). width ());
});
</script>

(Note: The actual width of the image1.jpg is 693)

The results are:
Opera:34
firefox:0
Ie:28
chrome:0
safari:0

Again F5 refresh, the result is:
firefox:693
ie:693
opera:693
chrome:0
safari:0
Safari and Chrome are always 0.

Should be able to understand that the picture is not loaded or the completion of the calculation of the picture width is not correct, the refresh should be cached, so the result is correct, but why Chrome

And Safari is always 0? and IE and opera actually at the beginning will calculate a wrong value out.
Change it to the bottom so that's all right:

Copy Code code as follows:

<div id= "CC" ></div>
<script>
$ (document). Ready (function () {
$ ("#cc"). Append ("Window.settimeout (function () {Alert ($ ("#aa"). width ());},100);
});
</script>

The bird who has solved this problem or has a more detailed understanding of the problem is also looking for the generous enlighten.

Copy Code code as follows:

$ (document). Ready (function () {
$ ("#cc"). Append ("$ ("#aa"). Load (function () {
Alert ($ ("#aa"). Width ()
}). attr ("src", "yun_qi_img/logo.gif");
});