使用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 相关文章推荐
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
js中的数组对象排序分析
Dec 11 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
微信小程序后端实现授权登录
Feb 24 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 获取当前访问的url文件名的方法小结
2010/02/08 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
php验证码生成代码
2015/11/11 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
php查询操作实现投票功能
2016/05/09 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
用Python输出一个杨辉三角的例子
2014/06/13 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
python各类经纬度转换的实例代码
2019/08/08 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
美国温暖商店:The Warming Store
2018/12/15 全球购物
淘宝网店营销策划书
2014/01/11 职场文书
后备干部考察材料
2014/02/12 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
天河观后感
2015/06/11 职场文书
工商行政处罚决定书
2015/06/24 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
PyTorch中的torch.cat简单介绍
2022/03/17 Python