jQuery width() 和 height() 为 img 元素返回 0
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16084374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery width() and height() return 0 for img element
提问by Richard Knop
So I am creating a new image element once I get response from AJAX call with image metadata like this:
因此，一旦我从带有图像元数据的 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);
But width() and height() functions are returning 0 although image has 30 x 30 px size and it appears correctly on the page. I need to get its dimensions in order to absolutely position the image.
但是 width() 和 height() 函数返回 0 虽然图像有 30 x 30 px 大小并且它在页面上正确显示。我需要获取其尺寸才能绝对定位图像。
回答by ahren
You need to wait until the image has loaded to have access to the width and height data.
您需要等到图像加载完毕才能访问宽度和高度数据。
var $img = $('<img>');
$img.on('load', function(){
console.log($(this).width());
});
$img.attr('src', file.url);
Or with plain JS:
或者使用普通的 JS：
var img = document.createElement('img');
img.onload = function(){
console.log(this.width);
}
img.src = file.url;
Also, you don't need to insert the image into the DOM before you read the width and height values, so you could leave your .loading-imagereplacement until after you calculate all of the correct positions.
此外，您无需在读取宽度和高度值之前将图像插入 DOM，因此您可以.loading-image在计算所有正确位置之前保留替换图像。
回答by Mohammad Adil
That is because your image isn't loaded when you check width
那是因为当你检查宽度时你的图像没有加载
Try using load event this way
尝试以这种方式使用加载事件
$('img').on('load',function(){
// check width
});
回答by cellepo
回答by feeeper
As @ahren saidearlier the reason is that image not loaded when you tring to get it's sizes.
正如@ahren说前面的原因是，当你特林得到它的大小不会加载该图像。
If you want to fix this without jQuery you can use vanilla JS addEventListenermethod:
如果你想在没有 jQuery 的情况下解决这个问题，你可以使用 vanilla JSaddEventListener方法：
document.getElementsByTagName('img')[0].addEventListener('load', function() {
// ...
var width = image.width();
var height = image.height();
console.log(width);
console.log(height);
// ...
});
回答by dazzafact
For me it only works with "appendTo"
对我来说它只适用于“appendTo”
$('<img src="myImage.jpeg">').load(function(){
$w = $(this).width();
$h = $(this).height();
$(this).remove()
}).appendTo("body")
回答by Marcus Monteiro
Try this:
尝试这个：
$('.loading-image').replaceWith(loadedImageContainter);
$('.loading-image').load(function(){
var width = image.width();
var height = image.height();
console.log(width);
console.log(height);
});
回答by CG_DEV
If you put it inside the AJAX call, that will work too, this is for json method
如果你把它放在 AJAX 调用中，那也可以，这是 json 方法
$.post("URL",{someVar:someVar},function(data){
var totalImgs = $('body').find('img').length;
var image = $('<img src="' + data.file[0].url + '" alt="" id="IMG_'+ totalImgs +'">');
loadedImageContainter.append(image);
$('.loading-image').replaceWith(loadedImageContainter);
var width = $('#IMG_'+totalImgs).width();
var height = $('#IMG_'+totalImgs).height();
},'json');
