关于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 相关文章推荐
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 Javascript
React中的Context应用场景分析
Jun 11 Javascript
关于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调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
python中dir函数用法分析
2015/04/17 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
Python ellipsis 的用法详解
2020/11/20 Python
英语系本科生个人求职信
2013/09/21 职场文书
项目管理计划书
2014/01/09 职场文书
机械个人求职信范文
2014/01/24 职场文书
网页美工求职信
2014/02/15 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
早安问候语大全
2015/11/10 职场文书
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python