jQuery width（）和height（）为img元素返回0

所以我创建一个新的图像元素，一旦我从AJAX调用响应图像元数据，如下所示：

var loadedImageContainter = $('
'); var image = $(''); loadedImageContainter.append(image); $('.loading-image').replaceWith(loadedImageContainter); var width = image.width(); var height = image.height(); console.log(width); console.log(height); 

但是width（）和height（）函数返回0，尽管图像大小为30 x 30 px并且它在页面上正确显示。 我需要得到它的尺寸，以绝对定位图像。

Answer 1

您需要等到图像加载后才能访问宽度和高度数据。

 var $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替换。

Answer 2

这是因为检查宽度时未加载图像

尝试以这种方式使用load事件

 $('img').on('load',function(){ // check width }); 

Answer 3

您还可以使用备用API $ .load方法：

 $('').load( function(){  }); 

Answer 4

正如@ahren之前所说的那样，原因是当你想要获得它的大小时图像没有加载。

如果你想在没有jQuery的情况下解决这个问题，你可以使用vanilla JS addEventListener方法：

 document.getElementsByTagName('img')[0].addEventListener('load', function() { // ... var width = image.width(); var height = image.height(); console.log(width); console.log(height); // ... }); 

Answer 5

试试这个：

 $('.loading-image').replaceWith(loadedImageContainter); $('.loading-image').load(function(){ var width = image.width(); var height = image.height(); console.log(width); console.log(height); }); 

Answer 6

如果你把它放在AJAX调用中，那也可以用，这适用于json方法

 $.post("URL",{someVar:someVar},function(data){ var totalImgs = $('body').find('img').length; var image = $(''); loadedImageContainter.append(image); $('.loading-image').replaceWith(loadedImageContainter); var width = $('#IMG_'+totalImgs).width(); var height = $('#IMG_'+totalImgs).height(); },'json');