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);
}
这样,就可以在其他方法里直接调用图片的实际宽高了。
本文出自:http://www.51xuediannao.com/qd63/index.php/page-2-71-1.html 感谢!
js判断图片加载完成后获取图片实际宽高的更多相关文章
- js 图片加载完后的处理事件
//图片加载完成后再显示页面 document.getElementById('icon').onload=function(){ document.getElementById('wrap').st ...
- 当h5页面图片加载失败后,给定一个默认图
本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...
- JS判断页面加载完毕
//JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readySta ...
- JavaScript-onerror事件:图片加载失败后不显示
HTML: <img src="http://www.mazey.net/images/upload/image/20170518/1495122198180663.gif" ...
- 当图片加载失败时更换图片, Firefox onerror 报错
当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...
- jquery循环延迟加载,用于在图片加载完成后再加载js
<html> <head> <script type="text/javascript" src="http://lib.sinaapp.c ...
- js判断页面加载完毕方法
判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...
- js中页面加载完成后执行的几种方式及执行顺序
1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready(function(){});前两者本质上没有区别,第1种是第2种的简写方式.两个是docu ...
- js中页面加载完成后执行的几种方法及执行顺序
在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$ ...
随机推荐
- [Outlook] Outlook2013能收但无法发送邮件-0x800CCC13, 0x800CCC0B, 0x8004210B
[20140704更新],在公司收邮件的时候,问题再次出现,错误码:0x800ccc13,按照以下方法测试成功: 1. 按照以前办法,反复重启,失败 2. 按照以下参考连接A中的步骤 a. Click ...
- ios二维码扫描
1.添加AVFoundation.framework框架 2,控制器中实现 //第一步添加AVFoundation.framework框架 #import "ViewController.h ...
- MySQL5.7中新增的JSON类型的使用方法
创建表json_test: CREATE TABLE json_test(id INT(11) AUTO_INCREMENT PRIMARY KEY,person_desc JSON)ENGINE I ...
- 智能车学习(十一)——陀螺仪学习
一.学习说明 感觉就是配置I2C通信,然后直接移植51代码... 二.代码分享: 1.头文件: #ifndef I2C_GYRO_H_ #define I2C_GYRO_H_ /*********** ...
- Linux---从start_kernel到init进程启动
“平安的祝福 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 ” ini ...
- this和super
1.this * 每个类的每个非静态方法(没有被static修饰)都会隐含一个this引用名称,它指向调用这个方法的对象. * 当在方法中使用本类的属性时,都会隐含地使用this名称,当然也可以明确指 ...
- 51nod 1051 求最大子矩阵和
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1051 1051 最大子矩阵和 基准时间限制:2 秒 空间限制: ...
- 自定义鼠标光标,制作cur,设置热点,中心点。
..没哈好说的,,只是推荐一个软件 ArtCursor..非常好用. 关于另外一个更改光标的重要问题:鼠标的hotspot,也就是鼠标的作用点问题,本人关于这个问题纠结了很久,始终无法找到更改HCUR ...
- CentOS7安装docker出错(Transaction check error)
1. 出错内容: Transaction check error: :-.el7_2..x86_64 conflicts with :-.el7.x86_64 :-.el7_2..x86_64 con ...
- ie不支持getElementsByName的解决办法
在chrome下getElementsByName运行正常,可在IETester7~11下都不支持 w3c规范中getElementsByName是按着name属性进行检索的,而MS的IE却是按着i ...