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的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
PHP模块memcached使用指南
2014/12/08 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
Python处理JSON数据并生成条形图
2016/08/05 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
python for和else语句趣谈
2019/07/02 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
python datetime处理时间小结
2020/04/16 Python
Python实现EM算法实例代码
2020/10/04 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
国际贸易专业求职信
2014/06/04 职场文书
未婚证明范本
2015/06/15 职场文书