我有一个检测图像大小的功能,我想让它返回一个包含宽度和高度的对象。在下面的代码中,函数中的sz.width和sz.height 保存了值,但是在返回值之后,它是未定义的。我错过了什么?
function getImgSize(imgSrc) {
var newImg = new Image();
newImg.onload = function() {
var height = newImg.height;
var width = newImg.width;
function s() {}
sz = new s();
sz.width = width;
sz.height = height;
$('#infunc').text("in function, w = "+sz.width+", h = "+sz.height);
return sz;
}
newImg.src = imgSrc; // this must be done AFTER setting onload
}
var sz = getImgSize("http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg");
$('#outfunc').text("outside function, w = "+sz.width+", h = "+sz.height);
答案 0 :(得分:3)
函数getImgSize
设置图像加载然后终止。稍后,当图像加载时,会调用匿名onload函数并正确计算大小,然后将其返回给一个不受欢迎的DOM引擎......
你可能想知道你可以做你想做的事。简短的回答:你做不到。这是你最接近的地方:
function getImgSize(imgSrc, callback) {
var newImg = new Image();
newImg.onload = function() {
... // blah-blah blah
callback(sz);
}
newImg.src = imgSrc;
}
getImgSize("http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg",
function(sz) {
$('#outfunc').text("in callback, w = "+sz.width+
", h = "+sz.height);
});
我实际来到这里写道:
//这必须在设置onload后完成
这就是我打赌你的问题所在。 //这必须在设置onload后完成
答案 1 :(得分:2)
无法做到。您正在尝试获取异步调用的返回值。
考虑:
var i = 0;
setTimeout(function() { i = 1; }, 1000); //1 second later
alert(i);
这会提醒0
,因为该值只会在一秒内更改,而不是立即更改。
你要做的是同样的事情。你不能使用尚未发生的价值。为了完成你想要的,你需要使用回调。