使用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 表单规则集合对象
Jul 21 Javascript
jquery 插件学习(五)
Aug 06 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
vue-router 控制路由权限的实现
Sep 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巧获服务器端信息
2006/12/06 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
材料物理专业个人求职信
2013/12/15 职场文书
考试退步检讨书
2014/01/15 职场文书
图书馆标语
2014/06/19 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
小学校园广播稿
2015/08/18 职场文书
用Python创建简易网站图文教程
2021/06/11 Python