JQuery иногда возвращает нулевую высоту и ширину на изображении

Я наблюдаю необычное поведение. У меня есть плавающее диалоговое окно, в которое я помещаю изображение. Я хочу получить размер изображения с помощью 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 пытается измерить его высоту и ширину. Любые мысли?

Ответ 1

Вы правы, изображение не загружено.

Хуже того, в IE иногда сообщается о размере примерно 40x60 (маленький значок, который вы видите, когда изображение еще не загружено).

jQuery сообщает, что событие загрузки может использоваться с изображениями: http://api.jquery.com/load-event/

Я давно пытался решить эту проблему, перекрестный браузер, и я закончил опрос размеров изображений, чтобы вызвать пользовательское событие "load".

Спасибо

Ответ 2

Вы можете связать обработчик события 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() (более ранних версий).

Update

Я хотел бы подчеркнуть тот факт, что, если вы знаете размеры своего изображения, вы должны явно объявить их (это лучшая практика для более быстрого рендеринга браузера):

<img width="100px" height="200px" src="..." />

Ответ 3

У меня была эта проблема, пытаясь получить высоту абзацев <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; }

И это исправлено.

Ответ 4

Я считаю, что ты прав. Попробуйте выполнить регистрацию ширины и высоты изображения после загрузки изображения:

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 после привязки обработчика события к изображению. В противном случае у меня были непредсказуемые результаты, в зависимости от браузера.

Ответ 5

Является ли изображение когда-либо скрытым, либо с display: none, либо visibility: hidden? Невидимые элементы возвращают ширину и высоту 0.