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 相关文章推荐
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
IE 当eval遇上function的处理
Aug 09 Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
js 颜色选择插件
Jan 23 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 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
PHP开发文件系统实例讲解
2006/10/09 PHP
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
用cssText批量修改样式
2009/08/29 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
Vue实现简易计算器
2020/02/25 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
简单谈谈Python中的反转字符串问题
2016/10/24 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
python语音识别实践之百度语音API
2018/08/30 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
python绘制封闭多边形教程
2020/02/18 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
Linux操作面试题
2015/02/11 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
公司会计岗位职责
2014/02/13 职场文书
投标担保书范文
2014/04/02 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
党员民主评议个人总结
2014/10/20 职场文书
毕业实习感受与体会
2015/05/26 职场文书
高二语文教学反思
2016/02/16 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python