Я наблюдаю необычное поведение. У меня есть плавающее диалоговое окно, в которое я помещаю изображение. Я хочу получить размер изображения с помощью jquery и изменить размер его контейнера div до соответствующего размера. Он работает достаточно хорошо, но функция иногда возвращает нули в качестве размеров изображения.
$('#dialogueContainer').html('<div class="dialogue"><img src="/photos/' + file + '" id="lightImage" /></div>');
var imageHeight = $('#lightImage').height();
var imageWidth = $('#lightImage').width();
console.log(imageHeight + 'x' + imageWidth); //<-- This occasionally returns "0x0"
Я подозреваю, что изображение не может быть готово в DOM, когда jquery пытается измерить его высоту и ширину. Любые мысли?
Вы правы, изображение не загружено.
Хуже того, в IE иногда сообщается о размере примерно 40x60 (маленький значок, который вы видите, когда изображение еще не загружено).
jQuery сообщает, что событие загрузки может использоваться с изображениями: http://api.jquery.com/load-event/
Я давно пытался решить эту проблему, перекрестный браузер, и я закончил опрос размеров изображений, чтобы вызвать пользовательское событие "load".
Спасибо
Вы можете связать обработчик события load с элементом перед добавлением его в DOM, чтобы получить ширину/высоту, когда она доступна. Вы также можете задать ширину/высоту изображения с помощью CSS или встроенных атрибутов.
//create an img element, passing attribute values as we do, then bind an event handler to the `load` event for the image
var $img = $('<img />', { src : '/photos/' + file, id : 'lightImage' }).on('load', function () {
//now that the image has loaded we can be sure the height/width values we receive are accurate
var imageHeight = $(this).height(),
imageWidth = $(this).width();
console.log(imageHeight + 'x' + imageWidth);
});
//now change the HTML of the container, emptying the container, then appending a div element with the `dialogue` class which also has a child img element (our image from above)
$('#dialogueContainer').html($('<div />', { class : 'dialogue' }).html($img));
Мне нравится привязывать обработчик события load к элементу, прежде чем добавлять его в DOM или изменять его источник, таким образом вы знаете, что событие load находится на месте, когда изображение загружается (что может произойти быстро из кэш).
Обратите внимание, что .on() является новым в jQuery 1.7 и в этом случае заменяет .bind() (более ранних версий).
Я хотел бы подчеркнуть тот факт, что, если вы знаете размеры своего изображения, вы должны явно объявить их (это лучшая практика для более быстрого рендеринга браузера):
<img width="100px" height="200px" src="..." />
У меня была эта проблема, пытаясь получить высоту абзацев <div>, и это произошло не потому, что содержимое не загрузилось - я попытался оповестить его высоту на click, чтобы я мог убедиться был там 1-й и все еще получал 0. Оказалось, что это проблема css, я добавил к нему ясный класс, используя clear hack:
.clear { display:inline-block; }
.clear:after, .container:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html .clear { height:1%; }
.clear { display:block; }
И это исправлено.
Я считаю, что ты прав. Попробуйте выполнить регистрацию ширины и высоты изображения после загрузки изображения:
var $img = $('<img />');
$img.load(function(){
var imageHeight = $('#lightImage').height();
var imageWidth = $('#lightImage').width();
console.log(imageHeight + 'x' + imageWidth);
});
$img.attr('src', '/photos/' + file);
Заметьте, что я установил src после привязки обработчика события к изображению. В противном случае у меня были непредсказуемые результаты, в зависимости от браузера.
Является ли изображение когда-либо скрытым, либо с display: none, либо visibility: hidden? Невидимые элементы возвращают ширину и высоту 0.