关于JS判断图片是否加载完成且获取图片宽度的方法


Posted in Javascript onApril 09, 2013

做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处理,js处理图片主要是利用js中Image对象,通过 onload 事件和 onreadystatechange 来进行判断。

(1)第一中方法,通过onload事件,比如:

<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onload=function(){
alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height);
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
</script>
<div id="mypic">onloading……</div>

(2)第二种方法,使用 onreadystatechange 来判断

<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onreadystatechange=function(){
if(this.readyState=="complete"){
alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height);
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
}
</script>
<div id="mypic">onloading……</div>
Javascript 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
JavaScript中操作字符串小结
May 04 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
关于JavaScript中的关联数组分析
Apr 09 #Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 #Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 #Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 #Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 #Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 #Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 #Javascript
You might like
php json_encode值中大括号与花括号区别
2013/09/30 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
php连接mysql数据库
2017/03/21 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
vue组件生命周期详解
2017/11/07 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
Python管理Windows服务小脚本
2018/03/12 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
python 实现控制鼠标键盘
2020/11/27 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
电视购物广告词
2014/03/19 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript