ansaurus

Question

Having problems with grabbing image dimensions with jQuery

Answer 1

+1 A:

You may get 0 for the width and height if the image is not visible. (That's what just happened to me.)

Updated: You can confirm that the image is added to the DOM by checking the length property of the jQuery object:

var inDOM = ($('#image_1').length > 0);

grammar31 2009-02-27 04:06:48

It is visible, but jquery is basically choking and not showing the image. I was thinking along those lines. How can I tell if its actually inserted inside the DOM?

patricksweeney 2009-02-27 04:13:26

Answer 2

+1 A:

This works for me:

<head>
    <script type="text/javascript">
        function foo() {
            var image = document.getElementById("the_image");
            alert(image.offsetWidth);
            alert(image.offsetHeight);
        }
    </script>
</head>
<body onload="foo();">
    <img src="img.png" id="the_image">
</body>

This works as long as the image is not set to display: none; Using offsetWidth and offsetHeight also has the advantage of not requiring jQuery, at all.

Tyson 2009-02-27 04:18:33

That returns undefined for both. Thanks for the help though!

patricksweeney 2009-02-27 04:24:12

Can you post a link to a sample? It works for me (as shown in my edit above).

Tyson 2009-02-27 04:32:08

I did something like the edit and it did work. I was messing around with something I have to do at work tomorrow. Basically I have a gallery that has a frame of 400x300, and most of the images are 395x295. But with some are smaller, and I want to center the small ones. Thanks!

patricksweeney 2009-02-27 04:54:05

Hmmmm. I'm trying to accept your answer and it just shows a red box with the filename of the checkmark.....weird.

patricksweeney 2009-02-27 04:55:59

Answer 3

+1 A:

Perhaps this was a typo in your question, but is the ID of your image really "#image_1"? For your code to work, it should be just "image_1". The "#" is only used in the jquery selector to specify that the text following it is an ID.

tlianza 2009-02-27 05:40:27

Interesting insight.

grammar31 2009-02-27 13:52:28

Answer 4

A:

http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome

hlfcoding 2009-03-29 02:29:42

Answer 5

+3 A:

Even though you've already chosen an answer, I am typing this one so you understand why your prior code did not work.

jQuery's document.ready function fires before images are loaded. Use window.load instead...

$(window).load(function() {
  var width = $("#image_1").width();
  var height = $("#image_1").height();
  document.write(width);
  document.write(height);
});

For what it's worth, I think it is better to use jQuery for this task because of the inherent cross-browser functionality.

Josh Stodola 2009-03-29 04:40:54

Agreed, I have since used something like that on jQuery as it does work better. Thanks!

patricksweeney 2009-03-29 19:28:45

Answer 6

A:

@Tyson

Please re-read the question again. Your solution finds the location, not the dimensions.

2009-08-07 13:40:14

ansaurus

tags:

views:

answers:

Having problems with grabbing image dimensions with jQuery

related questions