快捷導(dǎo)航

關(guān)于用Jquery的height()、width()計算動態(tài)插入的IMG標(biāo)簽的寬高的問題

更新時間：2010年12月08日 14:58:41 作者：

關(guān)于用Jquery的height()、width()計算動態(tài)插入的IMG標(biāo)簽的寬高的問題的解決方法，需要的朋友可以參考下。

先來看現(xiàn)象：

 
<div id="cc"></div> 
<script> 
$(document).ready(function() { 
$("#cc").append("<div id='aa' style='width:200px;height:200px;' /></div>"); 
alert($("#aa").width()); 
}); 
</script> 

結(jié)果為：200
所有瀏覽器都得到正確的結(jié)果

把插入的元素改為IMG

復(fù)制代碼代碼如下:

 
<div id="cc"></div> 
<script> 
$(document).ready(function() { 
$("#cc").append("<img id='aa' src='http://www.dbjr.com.cn/images/logo.gif' />"); 
alert($("#aa").width()); 
}); 
</script> 

（注：image1.jpg的實際寬為693）

結(jié)果為：
Opera:34
Firefox:0
IE:28
Chrome:0
Safari:0

再F5刷新一下，結(jié)果為：
Firefox:693
IE:693
Opera:693
Chrome:0
Safari:0
Safari和Chrome始終為0。

應(yīng)該可以理解為在圖片沒有加載或呈現(xiàn)完成時計算出的圖片寬高也是不正確的，刷新后應(yīng)該是有了緩存，所以結(jié)果就正確了，但為什么Chrome

和Safari始終都為0呢？而且IE和OPERA居然一開始還會計算出一個錯誤值出來的。
改成下面這樣就都好了：

復(fù)制代碼代碼如下:

 
<div id="cc"></div> 
<script> 
$(document).ready(function() { 
$("#cc").append("<img id='aa' src='http://www.dbjr.com.cn/images/logo.gif' />"); 
window.setTimeout(function(){alert($("#aa").width()); },100); 
}); 
</script> 

有解決過此問題或有關(guān)于此問題更詳細(xì)的認(rèn)識的大鳥還望不吝賜教..

復(fù)制代碼代碼如下:

 
$(document).ready(function() { 
$("#cc").append("<img id='aa' />"); 
$("#aa").load(function(){ 
alert($("#aa").width() 
}).attr("src", "http://www.dbjr.com.cn/images/logo.gif"); 
}); 

您可能感興趣的文章:

相關(guān)文章

Easyui和zTree兩種方式分別實現(xiàn)樹形下拉框
最近工作中需要用到樹形下拉框，因為項目中樹形結(jié)構(gòu)使用的是zTree，效果不是很好看，于是想著使用easyui的comboTree，雖然效果達到了，但是風(fēng)格和bootstrap不搭，下面把這兩種方式的效果分享到腳本之家平臺供大家參考
2017-08-08
jquery動態(tài)賦值id與動態(tài)取id方法示例
這篇文章主要給大家介紹了關(guān)于jquery動態(tài)賦值id與動態(tài)取id的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-08-08
使用jquery實現(xiàn)的循環(huán)連續(xù)可停頓滾動實例
下面小編就為大家?guī)硪黄褂胘query實現(xiàn)的循環(huán)連續(xù)可停頓滾動實例。
2016-11-11
jQuery中:hidden選擇器用法實例
這篇文章主要介紹了jQuery中:hidden選擇器用法,以實例形式較為詳細(xì)的分析了:hidden選擇器的功能、定義及設(shè)置匹配元素不可見時的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-12-12
jQuery自定義多選下拉框效果
這篇文章主要為大家詳細(xì)介紹了jQuery自定義多選下拉框效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
如何使用jquery實現(xiàn)文字上下滾動效果
這篇文章主要介紹了jquery實現(xiàn)文字上下滾動效果。文字上下滾動循環(huán)顯示也是一種非常常見而且非常容易實現(xiàn)的文字特效。這是一種現(xiàn)在比較流行用的效果,用法很簡單。
2016-10-10
方便實用的jQuery checkbox復(fù)選框全選功能簡單實例
這篇文章介紹了jQuery checkbox復(fù)選框全選功能的代碼實例，有需要的朋友可以參考一下
2013-10-10
基于jQuery實現(xiàn)動態(tài)搜索顯示功能
這篇文章主要介紹了基于jQuery實現(xiàn)動態(tài)搜索顯示功能的相關(guān)資料,輸入數(shù)值自動匹配相關(guān)信息，感興趣的小伙伴們可以參考一下
2016-05-05
提取jquery的ready()方法單獨使用示例
有一些功能需求，需要在DOM載入時馬上執(zhí)行一些函數(shù)，但又不愿意僅為了這一個需求而引入整個JQuery庫，于是就把jQuery的方法提取出來，單獨使用了
2014-03-03
EasyUi datagrid 實現(xiàn)表格分頁
這篇文章主要介紹了EasyUi datagrid 實現(xiàn)表格分頁的方法和示例分享,需要的朋友可以參考下
2015-02-02