做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判断图片是否加载完成且获取图片宽度的方法,有需要的朋友可以参考一下
15.32 判断一副图片是否加载完毕 第16章 页面数据的验证 16.1 验证字符串是否全由数字组成 16.2 验证表单项必须填写 16.3 判断用户输入是否为中文 16.4 验证列表框中的值是否重复 16.5 检测输入框的统一方法 16.6 ...
15.32 判断一副图片是否加载完毕 第16章 页面数据的验证 16.1 验证字符串是否全由数字组成 16.2 验证表单项必须填写 16.3 判断用户输入是否为中文 16.4 验证列表框中的值是否重复 16.5 检测输入框的统一方法 16.6 ...
7.8 获取图片原生尺寸的方法 7.9 检查图像是否已经被完全加载 7.10 单击改变背景图案 7.11 如何显示Flickr网站的图片 7.12 如何显示Google Picasaweb的图片 7.13 按比例调整图片的大小 7.14 滑动效果的背景图片 7.15...
Activity Activity是一个应用程序组件,提供一个屏幕,用户可以用来交互为了完成某项任务,是一个负责与用户交互的组件 SSH 为 Struts+Spring+Hibernate的一个集成框架,是目前较流行的一种Web应用程序开源框架。...
采用ajax技术实现的图形验证码,在前端进行验证。验证码信息为图片。每一行代码均有注释,通俗... 5、创建一个js文件,并将该文件,引入到jsp 6、在js文件中,通过dwr,调用AjaxService类中的方法,取得数据,实现判断
实例119 判断指定年份是否为闰年 186 实例120 计算从出生到现在度过的时间 187 实例121 返回两个日期之间的间隔小时 188 实例122 倒计时 190 实例123 访问时间限制 191 实例124 计步器 192 4.3 日期时间特效 194 ...
72、判断 IFRAME 是否加载完成的方法 352 73、JS判断页面是否是在 IFRAME中 353 74、去掉浏览器中的滚动条 353 75、IFRAME滚动条样式 353 76、JS键盘事件 355 77、JS鼠标事件大全 355 78、JS滚动条滚动时监听 360 79...
-你可以向其中添加自己的语言版本,并执行js\languages下的pack.bat打包,最后编译工程。 +2009-09-01 v2.0.9 -为ExtAspNet.Alert添加两个静态方法ShowInParent和GetShowInParentReference,用于在父页面弹...
-你可以向其中添加自己的语言版本,并执行js\languages下的pack.bat打包,最后编译工程。 +2009-09-01 v2.0.9 -为ExtAspNet.Alert添加两个静态方法ShowInParent和GetShowInParentReference,用于在父页面弹...
- 图片懒加载、图片较多的情况下只加载首屏图片缩略图; - 编辑文件打开出错,自动关闭标签;文件打开20M限制(大于20M则不处理,浏览器会卡死) - 标签关闭提示:检测是否有未保存文件,文件修改实时修改是否修修改的...
2.纠正采集的图片标签中有js脚本时,可能会造成图片获取不到的BUG 3.友情链接管理,到期日期加入快捷的1、3、6、12个月的选择按钮 4.sitemap加入最后更新时间 5.对首页最新评论和最新留言中连续数字或者连续字母进行...
延迟加载图片: img元素不要使用src调用图片地址,而是用data-original。 [vod:pic]" src="{maccms:path}images/blank.png" alt="[vod:name]" /> ****************************系统内置JS、CSS函数库说明 结束**...
4、新增“窗口_是否被遮挡”,判断一个窗口是否被置顶窗口遮挡,代码由易友【@shituo】提供。 5、改善“汇编类->置入汇编代码”增添一个参数是否保留以前代码。感谢易友【@无名侠】反馈。 6、修正“文本_加密”返回...
192.如何判断上传图片的高度和宽度 193.如何使用DESCryptoServiceProvider类对数据或者文件进行加密解密 194.如何统计在线人数 195.如何在ASP.NET实现验证码 196.如何在本地取得指定网页的源代码 197.如何在ASP...
2、修复“ 图片_屏幕区域截图”在宽度负数的情况下报错的BUG; 3、修复“时间_取北京时间戳”无法取出的BUG; 三、优化 1、优化“类_FTP”上传目录逻辑判断的BUG,感谢【猥琐小胖子】反馈; 2、优化“类_FTP-目录...
延迟加载图片: img元素不要使用src调用图片地址,而是用data-original。 [vod:pic]" src="{maccms:path}images/blank.png" alt="[vod:name]" /> ****************************系统内置JS、CSS函数库说明 结束****...
如何判断ArrayList,Hashtable,SortedList 这类对象是否相等 帮助解决网页和JS文件中的中文编码问题的小工具 慎用const关键字 装箱,拆箱以及反射 动态调用对象的属性和方法——性能和灵活性兼备的方法 消除由try/...