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">
这里显示结果。
</div>
</div>
</body>
</html>
将此代码在chrome运行，当alert窗口弹出时，将会发现页面的img并没有加载。
运行结果如下：
这是文字
showImg:112&0
showText:18
1、此处 img的默认宽度为112，但是我链接的img的宽度为1000,
2、此处img的高度为0,
现做如下改动
复制代码 代码如下:
<img src="images/flash_pic.gif" width="1000" />
运行结果为：
这是文字
showImg:1000&0
showText:18
img的高度仍旧为0
当为其设置高度之后，就可以正常获取到。
结论：在chrome下，img不设置宽高，通过jquery的width()和height()获取到的img的宽高将为112px * 0
求助：希望哪位大侠有好办法，能在不设置宽高情况下获取到正确的值。
相关文章
这篇文章主要介绍了如何配置Webpack SourceMap，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2024-03-03
这篇文章主要介绍了JavaScript将数字转换成大写中文的方法,涉及javascript字符串及匹配的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JavaScript实现页面跳转的方式汇总的相关资料,需要的朋友可以参考下2016-05-05
这篇文章主要为大家详细介绍了JS+H5 Canvas实现时钟效果，利用JavaScript和Canvas实现简单时钟效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
JS中的eval 为什么加括号呢？相信很多朋友都不是很清楚吧，下面小编通过本教程帮助大家学习JS中的eval 为什么加括号，感兴趣的朋友了解下吧2016-04-04
这篇文章主要为大家详细介绍了Bootstrap布局方式，分析了Bootstrap网格系统的各种特性，感兴趣的小伙伴们可以参考一下2016-05-05
在Web开发中,我们经常需要将图片转换为Base64格式,以便在不依赖外部资源的情况下直接在HTML中使用,在这篇文章中,我将向您展示如何使用JavaScript将图片元素转BASE64编码,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了JavaScript对象原型链原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了JS实现倒计时和文字滚动的效果,以实例的形式分析了倒计时与文字滚动效果的具体实现方法,并附有js时间变量的说明,非常具有实用价值,需要的朋友可以参考下2014-10-10
这篇文章主要给大家介绍了关于利用微信小程序获取当前时间及星期几的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
最新评论