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！

Answer 2

这是因为元素没有附加到DOM树上尝试在调用.width（）

之前将元素附加到DOM

在将图像附加到浏览器之前，Jquery .width（）返回0

2 个答案: