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