js判断图片加载完成后获取图片实际宽高的方法


Posted in Javascript onFebruary 25, 2016

本文实例讲述了js判断图片加载完成后获取图片实际宽高的方法。分享给大家供大家参考,具体如下:

通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的。下面的代码就能解决这样的问题:

<img src="01.jpg" id="test" width="250px">

js code:

//图片加载完成后获取图片实际宽高
var _test = document.getElementById("test");
test.onload = function(){
  imgSize.call(_test);
}
function imgSize(){
  var imgObj = new Image();
  imgObj.src = this.src;
  alert(imgObj.width + "\n" + imgObj.height);
}

如果想在其他方法中调用这个实际的宽高,应该将alert(imgObj.width + "\n" + imgObj.height);改为return imgObj,然后是调用的方法:

window.onload = function(){
    function a(){
      var real= imgSize.call(_test);
      var realwidth = real.width;
      alert(realwidth);
    }
    a();
}

以上方法过于繁琐,经过本人的提炼,简写如下:

window.onload = function(){
    var _test = document.getElementById("test"); //若是jq,则直接将此代码换成 var _test = $("#test"); 即可。
    var imgObj = new Image();
    imgObj.src = _test.src; //若是jq,则直接将此代码换成 imgObj.src = _test.attr("src"); 即可。
    alert(imgObj.width);
}

这样,就可以在其他方法里直接调用图片的实际宽高了。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 #Javascript
jquery zTree异步加载简单实例讲解
Feb 25 #Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 #Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 #Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 #Javascript
jquery ztree实现模糊搜索功能
Feb 25 #Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 #Javascript
You might like
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python内置数据类型详解
2014/08/18 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
Python封装原理与实现方法详解
2018/08/28 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
Python netmiko模块的使用
2020/02/14 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
python中wx模块的具体使用方法
2020/05/15 Python
python中pop()函数的语法与实例
2020/12/01 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
Servlet方面面试题
2016/09/28 面试题
办加油卡单位介绍信
2014/01/09 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
2014植树节活动总结
2014/03/11 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
聘任书的格式及模板
2019/10/28 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript