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

栏目: 编程语言 发布于: 2014-05-07 15:37:57

做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 判断图片是否加载完毕
  • Jquery判断图片是否加载失败
  • 图片放大展示特效slimbox 最轻量级功能最强大的Jquery图片放大特效
  • Js地址栏特效(显示页面内所有加链接的图片的大小和查看当前的浏览器的高度)
  • Javascript 异步加载,提高网页的浏览速度
  • php获取内容中的所有图片列表并输出的方法
  • javascript判断鼠标左右键点击-兼容ie、firefox、chrome等各大主流浏览器
  • 使用jquery.lazyload动态延迟加载页面图片的方法
本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。
转载请注明:文章转载自 [http://www.php230.com]
本文标题:js判断图片是否加载完成并获取图片的宽度
IT技术书籍推荐:
O'Reilly精品图书系列:JavaScript权威指南(第6版)
O'Reilly精品图书系列:JavaScript权威指南(第6版)
弗兰纳根(David Flanagan) (作者), 淘宝前端团队 (译者)
《O'Reilly精品图书系列:JavaScript权威指南(第6版)》讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScriptAPI。《O'Reilly精品图书系列:JavaScript权威指南(第6版)》涵盖了HTML5和ECMAScript5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及JavaScript式的面向对象。《O'Reilly精品图书系列:JavaScript权威指南(第6版)》不仅适合初学者系统学习,也适合有经验的JavaScript开发者随手翻阅。
最新互联网资讯