chrome下img加载对height()的影响示例探讨


Posted in Javascript onMay 26, 2014
<!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

求助:希望哪位大侠有好办法,能在不设置宽高情况下获取到正确的值。

Javascript 相关文章推荐
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
script标签属性用type还是language
Jan 21 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 #Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 #Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 #Javascript
jquery attr方法获取input的checked属性问题
May 26 #Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 #Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 #Javascript
js处理表格对table进行修饰
May 26 #Javascript
You might like
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
php 日期时间处理函数小结
2009/12/18 PHP
PHP IPV6正则表达式验证代码
2010/02/16 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
详解Python中的__init__和__new__
2014/03/12 Python
Python求导数的方法
2015/05/09 Python
Python获取央视节目单的实现代码
2015/07/25 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
简单了解什么是神经网络
2017/12/23 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
pycharm导入源码的具体步骤
2020/08/04 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
美国著名手表网站:Timepiece
2017/11/15 全球购物
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
舞蹈教育学专业推荐信
2013/11/27 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
常住证明范本
2015/06/23 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫