使用jquery获取网页中图片高度的两种方法


Posted in Javascript onSeptember 26, 2013

使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的

$("img").whith();(返回纯数字) 
$("img").css("width");(返回字符串:数字+"px")

但是有时候会遇到返回0的情况,上面方法返回值竟然是0或者0px,很让人诧异

方法一

在很早之前,我使用的解决方法,这也是我的师傅告诉我的解决方法:在你需要获取到的图片的<img>标签上加上width属性,或者在css中写出来图片的告诉,这样就可以了,所以每次我要去获取一个图片的高度的时候,都需要去先测量一下图片的高度,然后写到网页中,这样才可以,是不是很笨拙啊,下面我们来看第二个方法。

方法二

最近在看Learning jQuery英文版原著,正因为一边翻译,一边阅读,所以每一页都看的很仔细,于是终于仔细阅读体会了以下两种常用的jquery事件加载的方法

$(function(){}); 
window.onload=function(){}

第一个呢,是在DOM结构渲染完成以后调用的,这时候网页中一些资源还没有加载,比如图片等资源,但是DOM结构已经渲染成功了
第二个呢,是在网页DOM结构渲染完成,而且资源已经加载成功以后调用的。

有没有感受出区别来呢,一个是在资源没有加载的时候调用的,一个是在资源加载结束,页面已经渲染之后调用的,所以当我们在$(function(){})调用$('img').width()的时候,由于图片还没有加载,所以这时候<img>标签的高度就是0,所以返回值就是0。但是当你用window.onload=function(){}调用的时候,图片已经加载出来了,所以这时候就能得到图片的高度。

所以记得,$(function(){})是在DOM渲染结束,资源还没有加载的时候执行的,如果你想获取到一些资源的信息,这个时候是没有办法的哦

Javascript 相关文章推荐
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 #Javascript
js中的referrer返回上一页使用介绍
Sep 26 #Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 #Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 #Javascript
Jquery实现图片左右自动滚动示例
Sep 25 #Javascript
jquery实现加载等待效果示例
Sep 25 #Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 #Javascript
You might like
一个oracle+PHP的查询的例子
2006/10/09 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
php中的异常和错误浅析
2017/05/03 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
python实现视频读取和转化图片
2019/12/10 Python
Django models文件模型变更错误解决
2020/05/11 Python
Python如何绘制日历图和热力图
2020/08/07 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
超市实习总结自我鉴定
2013/09/19 职场文书
廉洁校园实施方案
2014/05/25 职场文书
党委领导班子整改方案
2014/09/30 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL
你知道Java Spring的两种事务吗
2022/03/16 Java/Android