關于用Jquery的height()、width()計算動態(tài)插入的IMG標簽的寬高的問題
更新時間：2010年12月08日 14:58:41 作者：
關于用Jquery的height()、width()計算動態(tài)插入的IMG標簽的寬高的問題的解決方法，需要的朋友可以參考下。
先來看現(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://m.fzitv.net/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。
應該可以理解為在圖片沒有加載或呈現(xiàn)完成時計算出的圖片寬高也是不正確的，刷新后應該是有了緩存，所以結(jié)果就正確了，但為什么Chrome
和Safari始終都為0呢？而且IE和OPERA居然一開始還會計算出一個錯誤值出來的。
改成下面這樣就都好了：
<div id="cc"></div>
<script>
$(document).ready(function() {
$("#cc").append("<img id='aa' src='http://m.fzitv.net/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://m.fzitv.net/images/logo.gif");
});
復制代碼 代碼如下:
<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://m.fzitv.net/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。
應該可以理解為在圖片沒有加載或呈現(xiàn)完成時計算出的圖片寬高也是不正確的，刷新后應該是有了緩存，所以結(jié)果就正確了，但為什么Chrome
和Safari始終都為0呢？而且IE和OPERA居然一開始還會計算出一個錯誤值出來的。
改成下面這樣就都好了：
復制代碼 代碼如下:
<div id="cc"></div>
<script>
$(document).ready(function() {
$("#cc").append("<img id='aa' src='http://m.fzitv.net/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://m.fzitv.net/images/logo.gif");
});
相關文章
這篇文章主要介紹了jQuery實現(xiàn)彈出窗口彈出div層的實例代碼,點擊頁面的鏈接，彈出一個div層，同時頁面的其他部分變灰并且不能點擊,，具體實現(xiàn)代碼大家參考下本文吧2017-01-01
使用jquery給input和textarea設定ie中的focus
在瀏覽網(wǎng)站的過程中，我們經(jīng)?？梢钥匆姰斒髽它c擊后樣式改變的文本框和文本域,那么這種效果是如何實現(xiàn)的呢?2008-05-05
這篇文章主要介紹了jQuery 特性操作詳解的相關資料,并附實例代碼，需要的朋友可以參考下2016-09-09
基于jquery實現(xiàn)人物頭像跟隨鼠標轉(zhuǎn)動
一款非常乖巧的人物頭像跟隨鼠標轉(zhuǎn)動效果，在瀏覽器屏幕內(nèi)，人物臉龐始終面向鼠標轉(zhuǎn)動，本篇文章給大家介紹基于jquery實現(xiàn)人物頭像跟隨鼠標轉(zhuǎn)動，有需要的朋友可以參考下2015-08-08
jQuery plugin animsition使用小結(jié)
本文通過實例代碼給大家分享了jQuery plugin animsition用法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了jquery通過索引值操作html元素的代碼,需要的朋友可以參考下2023-05-05
詳談jQuery unbind 刪除綁定事件 / 移除標簽方法
下面小編就為大家?guī)硪黄斦刯Query unbind 刪除綁定事件 / 移除標簽方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
自制一個簡潔的tabs插件還是有必要的在設計之前，先整理好思路，實現(xiàn)tabs，自動輪換，ajax等主要功能，然后是dom的排列形式，這里采用傳統(tǒng)的2010-07-07
jquery+springboot實現(xiàn)文件上傳功能
這篇文章主要為大家詳細介紹了jquery+springboot文件上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
本文跟大家分享了兩個Jquery標簽頁效果，各有各的特色，希望大家都會喜歡，并且能夠熟練掌握，感興趣的小伙伴們可以參考一下2015-09-09