chrome下img加載對(duì)height()的影響示例探討
更新時(shí)間：2014年05月26日 10:44:11 作者：
這篇文章主要介紹了chrome下img加載對(duì)height()的影響,需要的朋友可以參考下
復(fù)制代碼 代碼如下:
<!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加載對(duì)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窗口彈出時(shí)，將會(huì)發(fā)現(xiàn)頁(yè)面的img并沒(méi)有加載。
運(yùn)行結(jié)果如下：
這是文字
showImg:112&0
showText:18
1、此處 img的默認(rèn)寬度為112，但是我鏈接的img的寬度為1000,
2、此處img的高度為0,
現(xiàn)做如下改動(dòng)
復(fù)制代碼 代碼如下:
<img src="images/flash_pic.gif" width="1000" />
運(yùn)行結(jié)果為：
這是文字
showImg:1000&0
showText:18
img的高度仍舊為0
當(dāng)為其設(shè)置高度之后，就可以正常獲取到。
結(jié)論：在chrome下，img不設(shè)置寬高，通過(guò)jquery的width()和height()獲取到的img的寬高將為112px * 0
求助：希望哪位大俠有好辦法，能在不設(shè)置寬高情況下獲取到正確的值。
相關(guān)文章
JS獲取scrollHeight問(wèn)題想到的標(biāo)準(zhǔn)問(wèn)題
如果沒(méi)有文檔聲明可以用 document.body.scrollHeight,如果有文檔聲明必須用 document.documentElement.scrollHeight關(guān)于這方面的東西2007-05-05
Microsoft Ajax Minifier 壓縮javascript的方法
使用Microsoft AJAX 庫(kù) (第六個(gè)預(yù)覽版) 其中有一個(gè) ajaxmin.exe 可以壓縮Js文件可以在dos 命令下 /? 查看其參數(shù)說(shuō)明。2010-03-03
這篇文章主要介紹了ES6基礎(chǔ)之默認(rèn)參數(shù)值，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
BootStrap tab選項(xiàng)卡使用小結(jié)
這篇文章主要為大家詳細(xì)介紹了BootStrap tab選項(xiàng)卡使用小結(jié)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
詳解微信小程序動(dòng)畫(huà)Animation執(zhí)行過(guò)程
這篇文章主要介紹了微信小程序動(dòng)畫(huà)Animation執(zhí)行過(guò)程 / 實(shí)現(xiàn)過(guò)程 / 實(shí)現(xiàn)方式，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
js實(shí)現(xiàn)當(dāng)鼠標(biāo)移到表格上時(shí)顯示這一格全部?jī)?nèi)容的代碼
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)當(dāng)鼠標(biāo)移到表格上時(shí)顯示這一格全部?jī)?nèi)容的代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
這篇文章主要介紹了如何在網(wǎng)站里使用Sticker.js實(shí)現(xiàn)貼紙效果，非常炫酷，推薦給大家2015-01-01
微信公眾號(hào)錄音文件的播放與保存(amr文件轉(zhuǎn)mp3)
本文主要介紹了微信公眾號(hào)錄音文件的播放與保存(amr文件轉(zhuǎn)mp3)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
本篇文章主要介紹了ionic2懶加載配置詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
js實(shí)現(xiàn)一個(gè)逐步遞增的數(shù)字動(dòng)畫(huà)
可視化大屏項(xiàng)目使用最多的組件就是數(shù)字組件，本文主要介紹了js實(shí)現(xiàn)一個(gè)逐步遞增的數(shù)字動(dòng)畫(huà)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12