先來看現象：
代碼如下:
<div id="cc"></div>
<script>
$(document).ready(function() {
$("#cc").append("<div id='aa' style='width:200px;height:200px;' /></div>");
alert($("#aa").width());
});
</script>
結果為：200
所有浏覽器都得到正確的結果
把插入的元素改為IMG
代碼如下:
<div id="cc"></div>
<script>
$(document).ready(function() {
$("#cc").append("<img id='aa' src='http://www.poluoluo.com/images/logo.gif' />");
alert($("#aa").width());
});
</script>
（注：image1.jpg的實際寬為693）
結果為：
Opera:34
Firefox:0
IE:28
Chrome:0
Safari:0
再F5刷新一下，結果為：
Firefox:693
IE:693
Opera:693
Chrome:0
Safari:0
Safari和Chrome始終為0。
應該可以理解為在圖片沒有加載或呈現完成時計算出的圖片寬高也是不正確的，刷新後應該是有了緩存，所以結果就正確了，但為什麼Chrome
和Safari始終都為0呢？而且IE和OPERA居然一開始還會計算出一個錯誤值出來的。
改成下面這樣就都好了：
代碼如下:
<div id="cc"></div>
<script>
$(document).ready(function() {
$("#cc").append("<img id='aa' src='http://www.poluoluo.com/images/logo.gif' />");
window.setTimeout(function(){alert($("#aa").width()); },100);
});
</script>
有解決過此問題或有關於此問題更詳細的認識的大鳥還望不吝賜教..
代碼如下:
$(document).ready(function() {
$("#cc").append("<img id='aa' />");
$("#aa").load(function(){
alert($("#aa").width()
}).attr("src", "http://www.poluoluo.com/images/logo.gif");
});