JS图片加载与获取远程图片大小

哎,过了个国庆,我那个堕落呀…博客都长草了…其实还有一个主要原因是我的本本屏幕出问题了,没心情对着它,昨天去换了个屏幕,感觉那怎么就不是我的本本了…

之前有看到群里有人问用js实现图片加载的,原来死去的blog上是有Demo的,挂了!后来又有人问了用js获取远程图片大小,就顺便写一下好了一起放上来,看Demo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>JS图片加载与获取远程图片大小</title>
</head>
<body>
<input id="path" value="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" style="width:400px" /><button onclick="loadpic($('prev'),$('path').value)">加载</button><button onclick="getImgSize($('path').value);">获取大小</button>
<div id="prev"></div>
<script type="text/javascript">
var $=function(id){
	return document.getElementById(id);
}
function loadpic(holder,url){
	holder.innerHTML='正在加载...';
	var img=new Image();
	img.src=url;
	var imgElem=document.createElement('img');
	var dick=setInterval(function(){
		if(img.complete){
			clearInterval(dick);
			holder.innerHTML='';
			imgElem.src=img.src;
			img=null;
			holder.appendChild(imgElem);
			return imgElem;
		}
	},50);
}
function getImgSize(url){
	var img=new Image();
	img.src=url;
	var dick=setInterval(function(){
		if(img.complete){
			clearInterval(dick);
			alert('图片宽度:'+img.width+'\r\n图片高度:'+img.height);
		}
	},100);
}
</script>
</body>
</html>

Laisser un commentaire Annuler la réponse