Форум

ZaValera · #1 (**permalink**) 04.02.2012, 22:13

Добрый день.
Имеется вот такой вот HTML-код:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link REL=STYLESHEET TYPE="text/css" HREF="test.css"> 
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<script>
testImg = document.createElement('img');
testImg.src = 'http://www.thg.ru/display/20030221/images/mire.jpg';
//document.body.appendChild(testImg);
function test()
{
	alert($(testImg).width());
	alert(testImg.width);
}
</script>
<div style = "width:100px;height:100px;background-color:green" OnClick = "test()">
</div>
</body>

При клике по зеленому квадрату выдается ширина картинки с использованием jQuery и без него.
Почему $.width() выдает 0???
Если добавить этот объект в DOM (убрать комментарий в 11 строке), то все нормально.

Nekromancer · #2 (**permalink**) 04.02.2012, 22:15

Сообщение от ZaValera

Если добавить этот объект в DOM (убрать комментарий в 11 строке), то все нормально.

Вот вы и ответили на свой вопрос. Потому, что нужно вставить элемент в DOM.

ZaValera · #3 (**permalink**) 04.02.2012, 22:18

Это конечно замечательно, но мне нужно знать ширину объекта до его добавления в DOM.
Уточняю вопрос - как в jQuery можно узнать ширину изображения, если оно не находится в DOM?
testImg.width - работает и так.

ZaValera · #4 (**permalink**) 04.02.2012, 22:45

Браво, Вы просто мастер аналогий, было очень интересно читать!!!!
Но, я позволю себе не согласиться. Как только мы назначаем изображению src, оно начинает загружаться, т.е. форель кусочками перекочевывает в наш пакет. И до тех пор, пока загрузка не завершена, testImg.width тоже не знает истинных размеров. Но как только загрузка завершилась, форель в пакете, мы ее просто еще не решили, кому из друзей ее подарить, и ее размер testImg.width мы уже знаем.
И вот меня удивляет, что метод $.width() использует не все возможности для поиска ширины.

ZaValera · #5 (**permalink**) 04.02.2012, 22:56

И проблема-то вот в чем, я не против использовать testImg.width.
Но если я создаю объект вот таким вот образом

testImg = $('<img>').attr('src','test.jpg');

то как мне добраться до его ширины?
Я нашел вариант, но мне кажется, что он далеко не идеален:

var temp;
testImg.each(function(){temp =this.width});

Nekromancer · #6 (**permalink**) 04.02.2012, 23:10

ZaValera,

testImg[0].width;

а testImg.width() не работает потому, что это DOM операция, и работает со свойствами offsetWidth/clientWidth

ZaValera · #7 (**permalink**) 04.02.2012, 23:21

Супер, то что надо. Большое спасибо.

Форум

Справочник

Discord чат

Курсы javascript