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的$ ...
随机推荐
- C语言函数的读写
文件打开关闭函数:fopen()和fclose() <FILE *fopen(char *filename, char *mode)| int fclose(FILE *fp)> 字符读写 ...
- 注解:【基于外键的】Hibernate单向1->1关联
Person与Address关联:单向1->1,[基于外键的] Person.java package org.crazyit.app.domain; import javax.persiste ...
- JS 时间格式化
Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month &quo ...
- 为什么我们可以使用while(~scanf("%d"))读到文件末尾
经过测试文件末尾是一个标志位EOF 在c语言里我们用int来输出EOF 可以发现EOF等于-1 我们之前那个文章已经写过了..在c语言里负数的存储策略是补码 [-1]的补码=~(1)+1 那么就是比如 ...
- java基本数据类型及相互间的转换
1.首先复习一下java的基本数据类型,见下图 2.比较他们的字节数 备注:1字节(Byte)=8位(Bit) 3.转换中的知识点 *java中整数类型默认的int类型:小数类型默认的double: ...
- SQL错误码
///////////////////////////////////////////////////////////////ORA-00001: 违反唯一约束条件 (.)ORA-00017: 请求会 ...
- DHCP欺骗(DHCP Sproofing)
DHCP欺骗(DHCP Sproofing) DHCP Sproofing同样是一种中间人攻击方式.DHCP是提供IP地址分配的服务.当局域网中的计算机设置为自动获取IP,就会在启动后发送广播包请 ...
- idea 使用
1.idea对maven的兼容性优于eclipse,idea对于程序内部管理是模块,个人感觉也是优于eclipse. 2.idea默认设置编辑器字体是比较差的. 可以参考文章 http://www.3 ...
- BZOJ 1901 Zju2112 Dynamic Rankings ——整体二分
[题目分析] 上次用树状数组套主席树做的,这次用整体二分去水. 把所有的查询的结果一起进行二分,思路很好. [代码] #include <cstdio> #include <cstr ...
- PHP 垃圾回收机制
PHP垃圾回收说到底是对变量及其所关联内存对象的操作, 所以在讨论PHP的垃圾回收机制之前,先简要介绍PHP中变量及其内存对象的内部表示(其C源代码中的表示). PHP官方文档中将PHP中的变量划分为 ...