我有一个jQuery的问题.
我想获得img的真实宽度/高度.
现在我用这个函数得到它：
var imageSize = function(image) {
var realImageSize = { };
$("<img/>") // Make in memory copy of image to avoid css issues
.attr("src",$(image).attr("src"))
.load(function() {
realImageSize.width = this.width; // Note: $(this).width() will not
realImageSize.height = this.height; // work for in memory images.
alert(realImageSize['height']); // Valid height
});
alert(realImageSize['height']); // Undefined
return realImageSize;
}
所以我在内存中复制图像,然后在.load方法中获取并设置图像的实际大小.
现在,问题是var realImageSize变量由于某种原因在此范围内不可用.谁能告诉我为什么？
解决方法
这不是范围问题,它很好,但是同步问题：你在执行加载回调之前读取值.
您作为加载参数提供的回调不会立即执行,而是仅在加载图像后执行.
通常的解决方案是不返回值但提供回调：
var fetchImageSize = function(image,callback) {
$("<img/>") // Make in memory copy of image to avoid css issues
.load(function() {
var realImageSize = { };
realImageSize.width = this.width; // Note: $(this).width() will not
realImageSize.height = this.height; // work for in memory images.
callback(realImageSize);
}).attr("src",image.src);
};
fetchImageSize(myImage,function(realImageSize){
alert(realImageSize['height']); // NOT Undefined
});
请注意,在设置onload回调后应始终设置src.某些浏览器(如果您在缓存中有图像)如果在设置源后设置它,则可能不会调用onload回调.
