关于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 相关文章推荐
juqery 学习之四 筛选过滤
Nov 30 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
javascript回到顶部特效
Jul 30 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
js实现数字跳动到指定数字
Aug 25 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文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
Python实现把回车符\r\n转换成\n
2015/04/23 Python
python比较两个列表是否相等的方法
2015/07/28 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
日语翻译个人求职的自我评价
2013/10/14 职场文书
酒吧总经理岗位职责
2013/12/10 职场文书
小学开学典礼主持词
2014/03/19 职场文书
护士求职信范文
2014/05/24 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
项目合作意向书
2015/05/08 职场文书
导游词之千岛湖
2019/09/23 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
Python 发送SMTP邮件的简单教程
2021/06/24 Python