使用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定时器设定时间执行动作
Apr 02 Javascript
JavaScript去掉数组中的重复元素
Jan 13 Javascript
使用js 设置url参数
Jul 08 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 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切割页面div内容的实现代码分享
2012/07/31 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
Firefox outerHTML实现代码
2009/06/04 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
Python中logging日志库实例详解
2020/02/19 Python
python 基于opencv去除图片阴影
2021/01/26 Python
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
幼儿园实习生辞职信
2014/01/20 职场文书
中职生自荐信范文
2014/06/15 职场文书
单位工作证明书格式
2014/10/04 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
如何Tomcat中使用ipv6地址
2022/05/06 Servers