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
求助：希望哪位大侠有好办法，能在不设置宽高情况下获取到正确的值。
相关文章
这篇文章主要介绍了JS实现中英文混合文字溢出友好截取功能,通常会用到js的 substr 或者 substring方法, 以及 字符串的length属性。需要的朋友可以参考下2018-08-08
这篇文章主要介绍了JavaScript 模块化详解，块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信，下面一起进入文章来接更多详细内容2021-12-12
这篇文章主要为大家详细介绍了js面向对象之实现淘宝放大镜，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
本文通过代码实例给大家讲解js读取xml文件及jq读取xml文件的方法，对本文感兴趣的朋友一起学习吧2015-12-12
javascript动态添加表格数据行(ASP后台数据库保存例子)
本文，我将以一个类似的例子来做一个前台用Javascript动态添加数据项，后台保存到数据库的例子。2010-05-05
为了更好的更新多语言日期的显示,所以希望实现日期的本地化格式显示要求,常规的特殊字符型格式化无法满足显示要求,这里整理了几种我思考实现的本地化实现功能2024-06-06
这篇文章主要给大家介绍了JS中数学计算精度问题的解决方案,文中通过代码示例和图文结合给大家讲解非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-12-12
相信很多小伙伴在使用uniapp进行多端开发的时候,在面对一些业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这篇文章主要给大家介绍了关于uni-app配置APP自定义顶部标题栏设置方法与注意事项的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了浅谈webpack和webpack-cli模块源码分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
许多读者认为我那本《JavaScript语言精髓与编程实践》读来辛苦，所以我一直想写个简单的读本。索性，这次就写个最简单的吧。2008-10-10
最新评论