我在JS代码里要实现从网络上获取的图片的长宽信息，如何实现？
我已经测试过如下代码：
var pic = new Image();
pic.src = $info.smallPic;//图片的url地址
var www = pic.width;
var hhh = pic.height;
console.log(www+" "+hhh); //打印为0 0
上面的代码第一次运行时，打印为0 0，但是当我刷新网页时，能出来大小。
然后清除浏览器的浏览记录，运行该代码，又是0 0。
我的分析是，上面的方法不能对网络上获取的图片的长宽信息。
如果图片已经加载到本地后在运行该代码就能正常显示大小。我的问题是：有没有什么方法直接从网络上用URL方式获取图片后，直接对该对象进行获取长宽操作呢？
我已经测试过如下代码：
var pic = new Image();
pic.src = $info.smallPic;//图片的url地址
var www = pic.width;
var hhh = pic.height;
console.log(www+" "+hhh); //打印为0 0
上面的代码第一次运行时，打印为0 0，但是当我刷新网页时，能出来大小。
然后清除浏览器的浏览记录，运行该代码，又是0 0。
我的分析是，上面的方法不能对网络上获取的图片的长宽信息。
如果图片已经加载到本地后在运行该代码就能正常显示大小。我的问题是：有没有什么方法直接从网络上用URL方式获取图片后，直接对该对象进行获取长宽操作呢？
<!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>无标题文档</title>
</head>
<body>
原图片是 ：尺寸是(215*78)
<img src="http://www.jb51.net/images/logo.gif" />
<div id="box"></div>
<script language="javascript">
(function(){
var img=document.createElement('img');//创建一个img元素
img.src="http://www.jb51.net/images/logo.gif";//指定src
img.style.position="absolute";//防止正常的内容变形
img.style.visibility='hidden';//藏起来
var inj=document.getElementById('box').appendChild(img);//插入到box中。当然插入到document.body也可以
alert('宽：'+inj.offsetWidth);//然后就可以通过 offset 取得宽和高了
alert('高：'+inj.offsetHeight);
})();
</script>
大家应该能看的到啊，脚本之家
</body>
</html>
var hhh = pic.style.height;
pic.src = $info.smallPic;
(function (){
if(!pic.complete){
setTimeout(arguments.callee,20);
}else{
alert(pic.width+','+pic.height);
}
})();
图片没加载完成造成的
pic.onload=function(){
alert(this.width+" " + this.height);
};
pic.src = $info.smallPic;
正如3楼所说的，我的问题出现在图片没有加载完引起的。3，4楼的方法都可以。
但是，如果加载图片的过程是后台运行的吗？比如下面的代码：var tObj = {};
tObj.picHeight = getHeight(picUrl);
alert(tObj.picHeight);function getHeight($src){
var pic = new Image();
pic.onload=function(){
alert("onload height = "+pic.height);
return pic.height;
};
pic.src = $src;
}也就是说上面的代码运行后alert(tObj.picHeight);会弹出0，没有获取到图片的高度，
而过了一会，alert("onload height = "+pic.height);执行的时候会弹出正确的图片高度，
这样，我的代码运行完了，图片的高度在getHeight函数获取完了。但是不能及时return返回值，
结果tObj.picHeight最终还是没有得到图片的高度啊。。
各位大侠，有什么好的方法吗？
能够实时获取网络远端服务器中图片的高度的方法？不知道新浪微博是怎么实现的啊
var list = [], intervalId = null, // 用来执行队列
tick = function () {
var i = 0;
for (; i < list.length; i++) {
list[i].end ? list.splice(i--, 1) : list[i]();
};
!list.length && stop();
}, // 停止所有定时器队列
stop = function () {
clearInterval(intervalId);
intervalId = null;
}; return function (url, ready, load, error) {
var onready, width, height, newWidth, newHeight,
img = new Image(); img.src = url; // 如果图片被缓存，则直接返回缓存数据
if (img.complete) {
ready.call(img);
load && load.call(img);
return;
}; width = img.width;
height = img.height; // 加载错误后的事件
img.onerror = function () {
error && error.call(img);
onready.end = true;
img = img.onload = img.onerror = null;
}; // 图片尺寸就绪
onready = function () {
newWidth = img.width;
newHeight = img.height;
if (newWidth !== width || newHeight !== height ||
// 如果图片已经在其他地方加载可使用面积检测
newWidth * newHeight > 1024
) {
ready.call(img);
onready.end = true;
};
};
onready(); // 完全加载完毕的事件
img.onload = function () {
// onload在定时器时间差范围内可能比onready快
// 这里进行检查并保证onready优先执行
!onready.end && onready(); load && load.call(img); // IE gif动画会循环执行onload，置空onload即可
img = img.onload = img.onerror = null;
}; // 加入队列中定期执行
if (!onready.end) {
list.push(onready);
// 无论何时只允许出现一个定时器，减少浏览器性能损耗
if (intervalId === null) intervalId = setInterval(tick, 40);
};
};
})();
实例：imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
alert('size ready: width=' + this.width + '; height=' + this.height);
});