Получите высоту изображения внутри скрытого div

Question

Я хочу получить высоту/ширину изображения внутри скрытого div-содержащего, но .height() и .width() оба возвращают 0 (как и ожидалось).

$('body').append('<div id="init"><img id="myimg" src="someimage.png" /></div>'); 
$('#init').hide(); 
$('#myimg').height(); // == 0 
$('#myimg').width(); // == 0 

Как я могу получить правильную высоту/ширину изображения? Мне это нужно, чтобы сделать какие-то решения :-)

С наилучшими пожеланиями, Biggie

Answer 1

Его, потому что изображение еще не загрузилось .....

$('body').append('<div id="init"><img id="myimg" src="something.png" /></div>'); 
$('#init').hide(); 

$('#myimg').bind("load",function(){ 
    alert(this.height) //works 
})​ 

Heres испытание: http://jsfiddle.net/WMpSy/

Answer 2

Сделать DIV временно видимым для того, чтобы вычислить высоту или скрыть DIV от экрана вместо не используя дисплей: Нет. Я использовал первый подход и нашел его достаточно быстрым, чтобы вы никогда не увидели элемент.

Answer 3

Вы не можете скрыть его, если хотите правильную высоту и ширину, но вы можете переместить его так, чтобы он был вне экрана и таким образом эффективно скрыт. Попробуйте это:

var hiddenDiv = $('<div id="init"><img id="myimg" src="someimage.png" /></div>').appendTo('body').css({ 
    'position': 'absolute', 
    'top': -9999 
}); 

var img = hiddenDiv.children('img'); 
img.height(); 
img.width(); 

Answer 4

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

Answer 5

вы должны использовать находку()

$('body').find('#myimg').width(); 

или

$('body').find('#myimg').attr("width"); 

becouse вы приложили его после того, как DOM был загружен

Answer 6

Я не уверен, что вы можете сделать это с jQuery (или javascript вообще). У меня была аналогичная проблема с недопонимаемыми высотами и ширинами при загрузке/скрытии img. Вы можете, однако, ждать до нагрузок изображения, получить его правильной высоты и ширины, а затем скрыть родителя ... как так:

var height, width; 

$('#myimg').load(function() { 
    height = $(this).height(); 
    width = $(this).width(); 
    $('#init').hide(); 
} 

Answer 7

Я просто побежал через решение для этого, что вы делаете это вместо того, чтобы полагаться на JQuery, чтобы сделать это для вас. Вместо этого, получить яваскрипт элемента и получить высоту от самого элемента, а именно:

var img = hiddenDiv.children('img'); 

var imgHeight = img.get(0).height; 
var imgWidth = img.get(0).width; 

Метод JQuery get(0) позволяет получить на нижележащем элементе DOM и достаточно интересно, размеры DOM элемента не изменение.

Обратите внимание, что по соображениям производительности вам нужно будет кэшировать img.get(0), если вы планируете использовать его больше.

jQuery get method documentation

Answer 8

У меня была аналогичная проблема. Дело в том, что если изображение или div, содержащие изображение, имеют стиль = "display: none", то его css height = 0. Я обнаружил, что функции height() и width() дали неправильные значения, например 0! Решение для меня состояло в том, чтобы гарантировать, что у изображений есть свои атрибуты, поэтому, даже если они скрыты, значения все еще доступны.Поэтому используйте:

$ ('# testImg'). Attr ('height') и $ ('# testImg'). Attr ('width'), чтобы получить высоту и ширину изображения.

Answer 9

Да его, потому что изображение еще не загружено, и это мое решение:

$('<img src="My Image URL" />').appendTo('body').css({ 
       'position': 'absolute', 
       'top': -1 
      }).load(function() { 
       console.log('Image width: ' + $(this).width()); 
       console.log('Image height: ' + $(this).height()); 
       $(this).remove(); 
      });