chrome下img加載對height()的影響示例探討

更新時間：2014年05月26日 10:44:11 作者：

這篇文章主要介紹了chrome下img加載對height()的影響,需要的朋友可以參考下

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>chrome下img加載對height()的影響</title> 
<style type="text/css"> 
.floatleft { 
float:left; 
} 
</style> 
<script type="text/javascript" src="js/jQuery-1.7.1.js"></script> 
<script type="text/javascript"> 
$(function() { 
var img_h = $('.showimg').height(); 
var img_w = $('.showimg').width(); 
var text_h = $('.showtext').height(); 
$('.showresult').html('showImg:' + img_w + '&' + img_h + '<br />showText:' + text_h); 
alert('showImg:' + img_w + '&' + img_h + '<br />showText:' + text_h); 
}); 
</script> 
</head> 
<!-- 
作者：北京-南宮 
日期：2012-07-25 
--> 
<body> 
<div class="floatleft"> 
<div class="showimg"> 
<img src="images/flash_pic.gif" /> 
</div> 
<div class="showtext"> 
這是文字 
</div> 
<div class="showresult"> 
這里顯示結(jié)果。 
</div> 
</div> 
</body> 
</html> 

將此代碼在chrome運(yùn)行，當(dāng)alert窗口彈出時，將會發(fā)現(xiàn)頁面的img并沒有加載。

運(yùn)行結(jié)果如下：

這是文字
showImg:112&0
showText:18

1、此處 img的默認(rèn)寬度為112，但是我鏈接的img的寬度為1000,

2、此處img的高度為0,

現(xiàn)做如下改動

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

運(yùn)行結(jié)果為：

這是文字
showImg:1000&0
showText:18
img的高度仍舊為0

當(dāng)為其設(shè)置高度之后，就可以正常獲取到。

結(jié)論：在chrome下，img不設(shè)置寬高，通過jquery的width()和height()獲取到的img的寬高將為112px * 0

求助：希望哪位大俠有好辦法，能在不設(shè)置寬高情況下獲取到正確的值。

相關(guān)文章

JS實(shí)現(xiàn)中英文混合文字溢出友好截取功能
這篇文章主要介紹了JS實(shí)現(xiàn)中英文混合文字溢出友好截取功能,通常會用到j(luò)s的 substr 或者 substring方法, 以及字符串的length屬性。需要的朋友可以參考下
2018-08-08
JavaScript?模塊化詳解
這篇文章主要介紹了JavaScript?模塊化詳解，塊的內(nèi)部數(shù)據(jù)與實(shí)現(xiàn)是私有的,?只是向外部暴露一些接口(方法)與外部其它模塊通信，下面一起進(jìn)入文章來接更多詳細(xì)內(nèi)容
2021-12-12
js面向?qū)ο笾畬?shí)現(xiàn)淘寶放大鏡
這篇文章主要為大家詳細(xì)介紹了js面向?qū)ο笾畬?shí)現(xiàn)淘寶放大鏡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-01-01
JS與jQ讀取xml文件的方法
本文通過代碼實(shí)例給大家講解js讀取xml文件及jq讀取xml文件的方法，對本文感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
javascript動態(tài)添加表格數(shù)據(jù)行(ASP后臺數(shù)據(jù)庫保存例子)
本文，我將以一個類似的例子來做一個前臺用Javascript動態(tài)添加數(shù)據(jù)項(xiàng)，后臺保存到數(shù)據(jù)庫的例子。
2010-05-05
JS實(shí)現(xiàn)Date日期格式的本地化的方法小結(jié)
為了更好的更新多語言日期的顯示,所以希望實(shí)現(xiàn)日期的本地化格式顯示要求,常規(guī)的特殊字符型格式化無法滿足顯示要求,這里整理了幾種我思考實(shí)現(xiàn)的本地化實(shí)現(xiàn)功能
2024-06-06
JS中數(shù)學(xué)計(jì)算精度問題的解決方案
這篇文章主要給大家介紹了JS中數(shù)學(xué)計(jì)算精度問題的解決方案,文中通過代碼示例和圖文結(jié)合給大家講解非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2023-12-12
uni-app配置APP自定義頂部標(biāo)題欄設(shè)置方法與注意事項(xiàng)
相信很多小伙伴在使用uniapp進(jìn)行多端開發(fā)的時候,在面對一些業(yè)務(wù)需求的時候,uniapp給我們提供的默認(rèn)導(dǎo)航欄已經(jīng)不能滿足我們的業(yè)務(wù)需求了,這篇文章主要給大家介紹了關(guān)于uni-app配置APP自定義頂部標(biāo)題欄設(shè)置方法與注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下
2022-07-07
淺談webpack和webpack-cli模塊源碼分析
這篇文章主要介紹了淺談webpack和webpack-cli模塊源碼分析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
無廢話JavaScript教程(全集)
許多讀者認(rèn)為我那本《JavaScript語言精髓與編程實(shí)踐》讀來辛苦，所以我一直想寫個簡單的讀本。索性，這次就寫個最簡單的吧。
2008-10-10