25

So I am creating a new image element once I get response from AJAX call with image metadata like this:

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.

4

7 回答 7

58

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

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在计算所有正确位置之前将替换保留。

于 2013-04-18T13:32:25.007 回答
8

那是因为您检查宽度时未加载您的图像

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

$('img').on('load',function(){
  // check width
});
于 2013-04-18T13:33:38.697 回答
0

正如@ahren之前所说,原因是当您尝试获取其大小时未加载图像。

如果你想在没有 jQuery 的情况下解决这个问题,你可以使用 vanilla JSaddEventListener方法:

document.getElementsByTagName('img')[0].addEventListener('load', function() {
    // ...
    var width = image.width();
    var height = image.height();
    console.log(width);
    console.log(height);
    // ...
});
于 2018-02-07T06:54:53.223 回答
0

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

$('<img src="' + file.url + '" alt="">').load( function(){ <your function implementation> });
于 2016-02-24T20:34:50.927 回答
0

对我来说,它只适用于“appendTo”

$('<img src="myImage.jpeg">').load(function(){
   $w = $(this).width(); 
   $h = $(this).height();
   $(this).remove()
}).appendTo("body")
于 2018-12-12T09:52:13.733 回答
-1

尝试这个:

$('.loading-image').replaceWith(loadedImageContainter);
$('.loading-image').load(function(){
    var width = image.width();
    var height = image.height();
    console.log(width);
    console.log(height);
});
于 2014-06-30T01:41:36.000 回答
-3

如果你把它放在 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');
于 2013-04-18T13:38:22.603 回答