`

js判断图片是否加载完成并获取图片的宽度

阅读更多

做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处理,js处理图片主要是利用javascript中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>

 

分享到:
评论

相关推荐

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

    本篇文章小编为大家介绍,关于JS判断图片是否加载完成且获取图片宽度的方法,有需要的朋友可以参考一下

    程序天下:JavaScript实例自学手册

    15.32 判断一副图片是否加载完毕 第16章 页面数据的验证 16.1 验证字符串是否全由数字组成 16.2 验证表单项必须填写 16.3 判断用户输入是否为中文 16.4 验证列表框中的值是否重复 16.5 检测输入框的统一方法 16.6 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    15.32 判断一副图片是否加载完毕 第16章 页面数据的验证 16.1 验证字符串是否全由数字组成 16.2 验证表单项必须填写 16.3 判断用户输入是否为中文 16.4 验证列表框中的值是否重复 16.5 检测输入框的统一方法 16.6 ...

    超实用的jQuery代码段

    7.8 获取图片原生尺寸的方法 7.9 检查图像是否已经被完全加载 7.10 单击改变背景图案 7.11 如何显示Flickr网站的图片 7.12 如何显示Google Picasaweb的图片 7.13 按比例调整图片的大小 7.14 滑动效果的背景图片 7.15...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    Activity Activity是一个应用程序组件,提供一个屏幕,用户可以用来交互为了完成某项任务,是一个负责与用户交互的组件 SSH 为 Struts+Spring+Hibernate的一个集成框架,是目前较流行的一种Web应用程序开源框架。...

    采用ajax实现的图片验证码

    采用ajax技术实现的图形验证码,在前端进行验证。验证码信息为图片。每一行代码均有注释,通俗... 5、创建一个js文件,并将该文件,引入到jsp 6、在js文件中,通过dwr,调用AjaxService类中的方法,取得数据,实现判断

    JavaScript网页特效范例宝典源码

    实例119 判断指定年份是否为闰年 186 实例120 计算从出生到现在度过的时间 187 实例121 返回两个日期之间的间隔小时 188 实例122 倒计时 190 实例123 访问时间限制 191 实例124 计步器 192 4.3 日期时间特效 194 ...

    IBM WebSphere Portal门户开发笔记01

    72、判断 IFRAME 是否加载完成的方法 352 73、JS判断页面是否是在 IFRAME中 353 74、去掉浏览器中的滚动条 353 75、IFRAME滚动条样式 353 76、JS键盘事件 355 77、JS鼠标事件大全 355 78、JS滚动条滚动时监听 360 79...

    ExtAspNet_v2.3.2_dll

    -你可以向其中添加自己的语言版本,并执行js\languages下的pack.bat打包,最后编译工程。 +2009-09-01 v2.0.9 -为ExtAspNet.Alert添加两个静态方法ShowInParent和GetShowInParentReference,用于在父页面弹...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -你可以向其中添加自己的语言版本,并执行js\languages下的pack.bat打包,最后编译工程。 +2009-09-01 v2.0.9 -为ExtAspNet.Alert添加两个静态方法ShowInParent和GetShowInParentReference,用于在父页面弹...

    KODExplorer 芒果云-资源管理器

    - 图片懒加载、图片较多的情况下只加载首屏图片缩略图; - 编辑文件打开出错,自动关闭标签;文件打开20M限制(大于20M则不处理,浏览器会卡死) - 标签关闭提示:检测是否有未保存文件,文件修改实时修改是否修修改的...

    文章管理系统

    2.纠正采集的图片标签中有js脚本时,可能会造成图片获取不到的BUG 3.友情链接管理,到期日期加入快捷的1、3、6、12个月的选择按钮 4.sitemap加入最后更新时间 5.对首页最新评论和最新留言中连续数字或者连续字母进行...

    价值2000元的苹果cms电影网站后台带采集源码PHP,电影网站源码.rar

    延迟加载图片: img元素不要使用src调用图片地址,而是用data-original。 [vod:pic]" src="{maccms:path}images/blank.png" alt="[vod:name]" /&gt; ****************************系统内置JS、CSS函数库说明 结束**...

    精易模块[源码] V5.15

    4、新增“窗口_是否被遮挡”,判断一个窗口是否被置顶窗口遮挡,代码由易友【@shituo】提供。 5、改善“汇编类-&gt;置入汇编代码”增添一个参数是否保留以前代码。感谢易友【@无名侠】反馈。 6、修正“文本_加密”返回...

    asp.net专家疑难解答200问源码

    192.如何判断上传图片的高度和宽度 193.如何使用DESCryptoServiceProvider类对数据或者文件进行加密解密 194.如何统计在线人数 195.如何在ASP.NET实现验证码 196.如何在本地取得指定网页的源代码 197.如何在ASP...

    精易编程助手3.3+精易模块v6.3.1

    2、修复“ 图片_屏幕区域截图”在宽度负数的情况下报错的BUG; 3、修复“时间_取北京时间戳”无法取出的BUG; 三、优化 1、优化“类_FTP”上传目录逻辑判断的BUG,感谢【猥琐小胖子】反馈; 2、优化“类_FTP-目录...

    苹果8XPC和手机二合一完整版

    延迟加载图片: img元素不要使用src调用图片地址,而是用data-original。 [vod:pic]" src="{maccms:path}images/blank.png" alt="[vod:name]" /&gt; ****************************系统内置JS、CSS函数库说明 结束****...

    asp.net知识库

    如何判断ArrayList,Hashtable,SortedList 这类对象是否相等 帮助解决网页和JS文件中的中文编码问题的小工具 慎用const关键字 装箱,拆箱以及反射 动态调用对象的属性和方法——性能和灵活性兼备的方法 消除由try/...

Global site tag (gtag.js) - Google Analytics