Jquery .width() returns 0 zero before appending the image to the browser
I'm using jquery and i'm trying to create a slideshow.
Before i append the image, i shall know the Width of the image. So i use .width() of jquery and .attr("width").
My code is as follows:
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);
So, i tried to use the .load() and i did:
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
So, before i append the image to the browser, i shall know the right width of the image. But i get zero(0) and undefined.
Is there any other way, in order to take the right width of the image??
Thanks, in advance
Ah, I had the same problem before.
<img id="someImage"></img>
Then in your JQuery
$("#someImage").attr("src", "url/to/img").load(function() {
var width = $(this).width();
// do stuff!
});
And a fiddle of course!
It is because the elements do not attach to the DOM tree
try to attach the elements to the DOM before invoking .width()
精彩评论