javascript - Jquery .width() 在将图像附加到浏览器之前返回 0 零

Question

我正在使用 jquery 并尝试创建幻灯片。

在附加图像之前，我应该知道图像的宽度。 所以我使用 jquery 的 .width() 和 .attr("width")。

我的代码如下:

var attr_href = $next.attr('href'); /*returns the href of the image*/
var $item = $('<img src="'+attr_href+'" />'); 

//$item contains the image, the image is not displayed to the browser yet!!!

var itemWidth = $item.width();
alert(itemWidth); 
// --->  returns zero 0 in Mozilla and in IE

var itemWidth2 = $item.attr("width");
alert(itemWidth2);
//In Mozilla, the first time it returns 0.After the image is loaded, it returns the right Width
//In IE, always returns 0 zero !!!

//Now i have to append the photo and i have to use the right Width of the image!!!
var final_img = $('<img src="'+attr_href+'" width="'+itemWidth+'"/>');
$('.SlideShow').append(final_img);

所以，我尝试使用 .load() 并且我做到了:

var attr_href = $next.attr('href'); /*returns the href of the image*/
var $item = $('<img src="'+attr_href+'" />'); 

//$item contains the image, the image is not displayed to the browser yet!!!

$item.load(function  () {
    var WidthAfterLoading = $item.attr("width");
    var WidthAfterLoading2 = $item.width();

});

alert(WidthAfterLoading);  //returns "undefined" in both IE and Mozilla
alert(WidthAfterLoading2); //returns "undefined" in both IE and Mozilla

所以，在我将图像附加到浏览器之前，我应该知道图像的正确宽度。 但我得到零(0)和未定义。

是否有任何其他方法，以获取图像的正确宽度？？

提前致谢

Answer 1

啊，我之前也遇到过同样的问题。

<img id="someImage"></img>

然后在你的 JQuery 中

$("#someImage").attr("src", "url/to/img").load(function() {  
    var width = $(this).width();
    // do stuff!
});

还有一个 fiddle当然!