使用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 相关文章推荐
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
vue登录路由验证的实现
Dec 13 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
vue实现购物车加减
May 30 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 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中常用编辑器推荐
2007/01/02 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
linux php mysql数据库备份实现代码
2009/03/10 PHP
php 强制下载文件实现代码
2013/10/28 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
JS回调函数深入理解
2019/10/16 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
自我评价范文点评
2013/12/04 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
班主任班级寄语大全
2014/04/04 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers