關(guān)于用Jquery的height()、width()計(jì)算動態(tài)插入的IMG標(biāo)簽的寬高的問題
更新時(shí)間:2010年12月08日 14:58:41 作者:
關(guān)于用Jquery的height()、width()計(jì)算動態(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
<div id="cc"></div>
<script>
$(document).ready(function() {
$("#cc").append("<img id='aa' src='http://chabaoo.cn/images/logo.gif' />");
alert($("#aa").width());
});
</script>
(注:image1.jpg的實(shí)際寬為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)完成時(shí)計(jì)算出的圖片寬高也是不正確的,刷新后應(yīng)該是有了緩存,所以結(jié)果就正確了,但為什么Chrome
和Safari始終都為0呢?而且IE和OPERA居然一開始還會計(jì)算出一個錯誤值出來的。
改成下面這樣就都好了:
<div id="cc"></div>
<script>
$(document).ready(function() {
$("#cc").append("<img id='aa' src='http://chabaoo.cn/images/logo.gif' />");
window.setTimeout(function(){alert($("#aa").width()); },100);
});
</script>
有解決過此問題或有關(guān)于此問題更詳細(xì)的認(rèn)識的大鳥還望不吝賜教..
$(document).ready(function() {
$("#cc").append("<img id='aa' />");
$("#aa").load(function(){
alert($("#aa").width()
}).attr("src", "http://chabaoo.cn/images/logo.gif");
});
復(fù)制代碼 代碼如下:
<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://chabaoo.cn/images/logo.gif' />");
alert($("#aa").width());
});
</script>
(注:image1.jpg的實(shí)際寬為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)完成時(shí)計(jì)算出的圖片寬高也是不正確的,刷新后應(yīng)該是有了緩存,所以結(jié)果就正確了,但為什么Chrome
和Safari始終都為0呢?而且IE和OPERA居然一開始還會計(jì)算出一個錯誤值出來的。
改成下面這樣就都好了:
復(fù)制代碼 代碼如下:
<div id="cc"></div>
<script>
$(document).ready(function() {
$("#cc").append("<img id='aa' src='http://chabaoo.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://chabaoo.cn/images/logo.gif");
});
您可能感興趣的文章:
- jquery實(shí)現(xiàn)在光標(biāo)位置插入內(nèi)容的方法
- 基于jQuery的輸入框在光標(biāo)位置插入內(nèi)容, 并選中
- JQuery在光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼
- jQuery 在光標(biāo)定位的地方插入文字的插件
- jQuery:節(jié)點(diǎn)(插入,復(fù)制,替換,刪除)操作
- JQuery插入DOM節(jié)點(diǎn)的方法
- jQuery實(shí)現(xiàn)在最后一個元素之前插入新元素的方法
- jquery插入兄弟節(jié)點(diǎn)的操作方法
- jQuery往textarea中光標(biāo)所在位置插入文本的方法
- jQuery?在圖片和文字中插入內(nèi)容實(shí)例
相關(guān)文章
Easyui和zTree兩種方式分別實(shí)現(xiàn)樹形下拉框
最近工作中需要用到樹形下拉框,因?yàn)轫?xiàng)目中樹形結(jié)構(gòu)使用的是zTree,效果不是很好看,于是想著使用easyui的comboTree,雖然效果達(dá)到了,但是風(fēng)格和bootstrap不搭,下面把這兩種方式的效果分享到腳本之家平臺供大家參考2017-08-08jquery動態(tài)賦值id與動態(tài)取id方法示例
這篇文章主要給大家介紹了關(guān)于jquery動態(tài)賦值id與動態(tài)取id的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08使用jquery實(shí)現(xiàn)的循環(huán)連續(xù)可停頓滾動實(shí)例
下面小編就為大家?guī)硪黄褂胘query實(shí)現(xiàn)的循環(huán)連續(xù)可停頓滾動實(shí)例。2016-11-11如何使用jquery實(shí)現(xiàn)文字上下滾動效果
這篇文章主要介紹了jquery實(shí)現(xiàn)文字上下滾動效果。文字上下滾動循環(huán)顯示也是一種非常常見而且非常容易實(shí)現(xiàn)的文字特效。這是一種現(xiàn)在比較流行用的效果,用法很簡單。2016-10-10方便實(shí)用的jQuery checkbox復(fù)選框全選功能簡單實(shí)例
這篇文章介紹了jQuery checkbox復(fù)選框全選功能的代碼實(shí)例,有需要的朋友可以參考一下2013-10-10基于jQuery實(shí)現(xiàn)動態(tài)搜索顯示功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)動態(tài)搜索顯示功能的相關(guān)資料,輸入數(shù)值自動匹配相關(guān)信息,感興趣的小伙伴們可以參考一下2016-05-05EasyUi datagrid 實(shí)現(xiàn)表格分頁
這篇文章主要介紹了EasyUi datagrid 實(shí)現(xiàn)表格分頁的方法和示例分享,需要的朋友可以參考下2015-02-02