如何从href获取图像高度和宽度？

Question

I tried to get the image height and width from a href link image, but no luck. is there anyone know how to solve this problem?

here is the code:

<a href="/images/int_kit_a_set.jpg" class="upload">
    <img src="/Assets/images/int_kit_a_set_thumb.jpg"
        ondragstart="return false" height="108" width="144" alt="" />
</a>

Answer 1

Your HTML:

<a href="/images/int_kit_a_set.jpg" class="upload"><img src="/Assets/images/int_kit_a_set_thumb.jpg"  ondragstart="return false" height="108" width="144" alt="" /></a>

Javascript w/jQuery:

var image = $("<img />").attr("src", $(".upload").attr("href"));
$(document).append(image);
alert(image.height());
alert(image.width());
image.remove();

I didn't test the javascript... but I'm not really sure your question is clear... so maybe this is what you wanted, maybe not.

Essentially, I'm grabbing the HREF attribute of the link, creating a new image on the page with that url, measuring the image, and then removing it from the DOM.

You could add a style to the image which placed it off screen or something... but you'd have to mess with it to find something that worked cross-browser. Some browsers don't consistently load images which aren't visible. I'm also not sure if you'd run into any timing issues with my script.

Answer 2

Putting it all together: alert( new Image().src = $('.upload').attr('href')).width );