Question

所以我创建了一个新的图像元素，一旦我收到来自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，尽管图像尺寸为30 x 30 px并且它在页面上正确显示。我需要获得它的尺寸才能绝对定位图像。

Answer 1

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

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

Answer 2

这是因为检查宽度

时没有加载图像

尝试以这种方式使用加载事件

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

Answer 3

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

$('<img src="' + file.url + '" alt="">').load( function(){ <your function implementation> });

Answer 4

至于@ahren said之前的原因是当你想要获得它的大小时图像没有加载。

如果你想在没有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

对我来说，它仅适用于“ appendTo”

$('<img src="myImage.jpeg">').load(function(){
   $w = $(this).width(); 
   $h = $(this).height();
   $(this).remove()
}).appendTo("body")

Answer 6

试试这个：

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

Answer 7

如果你把它放在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');

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

7 个答案: