JQuery находит высоту изображения, не работающую
Я пытаюсь использовать jQuery, чтобы найти высоту изображения первых "главных детей" контейнера, затем установить контейнер на ту высоту. Но, я, может казаться, не вытягиваю атрибут высоты изображения - получение работ src. Какие-либо идеи? Это просто пытается вытянуть высоты с помощью CSS? Как делают я получаю "реальные высоты", я не могу ввести ширину и высоту в теге img - таким образом, это не опция ;(
$(document).ready(function() {
var imageContainer = '#image-container';
var imageSrc = $(imageContainer).children(':first').children(':first').attr('src'); // control test
var imageHeight = $(imageContainer).children(':first').children(':first').height(); // have also tried attr('height')
alert(imageSrc + ' ' + imageHeight);
});
<div id="image-gallery">
<div id="image-container">
<div class="slide">
<img src="test1.jpg" alt="test1" />
<p>
<strong>This is a test 1</strong>
</p>
</div>
<div class="slide">
<img src="test2.jpg" alt="test2" />
<p>
<strong>This is a test 2</strong>
</p>
</div>
</div>
</div>
3 ответа
Из API docs:
В случаях, когда код зависит от загруженных активов (например, если требуются размеры изображения), код должен быть помещен в обработчик события загрузки.
Таким образом, вместо выполнения вашего скрипта в $(document).ready(); используйте $(window).load(); или еще лучше, $(image).load();. Например:
$(document).ready(function() {
var imageContainer = '#image-container';
$(imageContainer).children(':first').children(':first').load(function() {
var imageSrc = $(this).attr('src'); // control test
var imageHeight = $(this).height(); // have also tried attr('height')
alert(imageSrc + ' ' + imageHeight);
});
});
Вы должны подождать, пока ваше изображение не будет нагрузке - что-то по линии
$('#imageContainer').children(':first').children(':first').load(function() {
alert($(this).height());
});
Причина, по которой вы не можете получить размер изображений, это то, что у них еще нет никакого размера. Код выполняется после нагрузки страницы, но до нагрузки изображений.
Запустите часть кода, который нуждается в размере изображения после того, как все элементы на странице загружаются:
$(window).load(function () {
...
});