Возникли проблемы с получением размеров изображения с помощью jQuery - PullRequest
Новая
       38

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

1 голос
/ 27 февраля 2009

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

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

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

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

Ответы [ 4 ]

8 голосов
/ 29 марта 2009

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

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

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

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

1 голос
/ 27 февраля 2009

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

1 голос
/ 27 февраля 2009

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

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

var inDOM = ($('#image_1').length > 0);
0 голосов
/ 27 февраля 2009

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...