Проблемы с получением размеров изображения с помощью jQuery

Мне сложно понять, как получить размеры элемента с помощью jQuery. Вот мой пример кода:

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

Теперь, конечно, у меня есть изображение с идентификатором # image_1. Что происходит, когда я пытаюсь запустить его, так это то, что он выводит два нуля. Не null дважды или undefined дважды.

Спасибо за помощь от javascript newb.

Ответов (4)

Решение

Это работает для меня:

<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>

Это работает до тех пор, пока изображение не настроено на display: none; использование, offsetWidth а offsetHeight также имеет то преимущество, что вообще не требует jQuery.

Вы можете получить 0 ширину и высоту, если изображение не видно. (Это то, что только что случилось со мной.)

Обновлено : вы можете подтвердить, что изображение добавлено в DOM, проверив свойство length объекта jQuery:

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

Возможно, это была опечатка в вашем вопросе, но действительно ли идентификатор вашего изображения "# image_1"? Чтобы ваш код работал, это должно быть просто «image_1». Знак «#» используется только в селекторе jquery, чтобы указать, что следующий за ним текст является идентификатором.

Хотя вы уже выбрали ответ, я набираю его, чтобы вы поняли, почему предыдущий код не работал.

Функция jQuery document.ready запускается перед загрузкой изображений. Вместо этого используйте window.load ...

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

Как бы то ни было, я думаю, что для этой задачи лучше использовать jQuery из-за присущей кроссбраузерности функциональности.