使用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 相关文章推荐
javascript比较文档位置
Apr 08 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
jquery text()要注意啦
Oct 30 Javascript
Javascript事件实例详解
Nov 06 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
用Node写一条配置环境的指令
Nov 14 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
PHP写杨辉三角实例代码
2011/07/17 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
PHP7多线程搭建教程
2017/04/21 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
JS解析XML实例分析
2015/01/30 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
javascript每日必学之封装
2016/02/23 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
python编写微信公众号首图思路详解
2019/12/13 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
毕业自我鉴定怎么写
2014/03/25 职场文书
我的祖国演讲稿
2014/05/04 职场文书
财务情况说明书范文
2014/05/06 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
幼师大班个人总结
2015/02/13 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
Python Django项目和应用的创建详解
2021/11/27 Python