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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
微信小程序抽奖组件的使用步骤
Jan 11 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
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
php实现的CSS更新类实例
2014/09/22 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
JSONP之我见
2015/03/24 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
python3.5绘制随机漫步图
2018/08/27 Python
Python Series从0开始索引的方法
2018/11/06 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
春节联欢晚会主持词
2014/03/24 职场文书
初中家长意见
2015/06/03 职场文书
闪闪的红星观后感
2015/06/08 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL