The question of using Jquery's height () and width () to calculate the width and height of dynamically inserted IMG labels

First look at the phenomenon:
Copy codeThe Code is 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>

Result: 200
All browsers get the correct results

Change the inserted element to IMG.
Copy codeThe Code is as follows:
<Div id = "cc"> </div>
<Script>
$ (Document). ready (function (){
$ ("# Cc"). append (" ");
Alert ($ ("# aa"). width ());
});
</Script>

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

Result:
Opera: 34
Firefox: 0
IE: 28
Chrome: 0
Safari: 0

Refresh F5 and the result is:
Firefox: 1, 693
IE: 693
Opera: 1, 693
Chrome: 0
Safari: 0
Safari and Chrome are always 0.

It should be understood that the width and height of the image calculated when the image is not loaded or displayed are not correct. After refreshing, the cache should be available, so the result is correct, but why does Chrome

And Safari are always 0? In addition, IE and OPERA calculated an incorrect value at the beginning.
Just change it to the following:
Copy codeThe Code is as follows:
<Div id = "cc"> </div>
<Script>
$ (Document). ready (function (){
$ ("# Cc"). append (" ");
Window. setTimeout (function () {alert ($ ("# aa"). width () ;}, 100 );
});
</Script>

If you have solved this problem or have a more detailed understanding of this problem, I hope you can give me some advice ..
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("# Cc"). append (" ");
$ ("# Aa"). load (function (){
Alert ($ ("# aa"). width ()
}). Attr ("src", "http://www.bkjia.com/uploads/allimg/131016/151624HQ-0.gif ");
});