对于img元素，jQuery width()和height()返回0
对于img元素，jQuery width()和height()返回0
提问于 2013-04-18 21:31:24
因此，一旦从AJAX调用获得响应，我就会创建一个新的图像元素，图像元数据如下所示：
var loadedImageContainter = $('<div class="loaded-image-container"></div>');
var image = $('<img src="' + file.url + '" alt="">');
loadedImageContainter.append(image);
$('.loading-image').replaceWith(loadedImageContainter);
var width = image.width();
var height = image.height();
console.log(width);
console.log(height);但是width()和height()函数返回0，尽管image的大小是30 x 30 px，并且它正确地显示在页面上。我需要得到它的尺寸，以便绝对定位图像。
回答 7
Stack Overflow用户
回答已采纳
发布于 2013-04-18 21:32:25
您需要等到图像加载完成后才能访问宽度和高度数据。
var $img = $('<img>');
$img.on('load', function(){
console.log($(this).width());
});
$img.attr('src', file.url);或者使用普通的JS：
var img = document.createElement('img');
img.onload = function(){
console.log(this.width);
}
img.src = file.url;此外，在读取宽度和高度值之前，不需要将图像插入到DOM中，因此可以在计算完所有正确位置后再替换.loading-image。
Stack Overflow用户
发布于 2013-04-18 21:33:39
这是因为当您检查宽度时，您的图像不会加载
尝试以这种方式使用load事件
$('img').on('load',function(){
// check width
});Stack Overflow用户
发布于 2016-02-25 04:34:51
您也可以使用备用接口$.load方法：
$('<img src="' + file.url + '" alt="">').load( function(){ <your function implementation> });页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16084374
复制相关文章
相似问题