Получить ширину и высоту изображения в Internet Explorer

Question

У меня есть изображение, которое обернуто внутри пары элементов DIV

<div id="wrapper">
...
<img src="myphoto.png" height="400px" width="500px>
</div>

Я использую jQuery, для доступа к высоте или ширине я использую

jQuery(img).attr('height');

или

jQuery(img)[0].height;

К сожалению, при изменении свойства DIV 'display' обтекания эти значения устанавливаются в 0 например, если я сделаю

$('#wrapper').hide()
then
jQuery(img)[0].height = 0;

То же самое для атрибутов.

Любая идея, как это исправить, показывая DIV, получая значения и снова скрывая его, действительно решает проблему, однако я не могу угадать количество оберток DIV, насколько это возможно (и их поведение меняется).

Спасибо

Редактировать: Спасибо за все ответы. Однако я забыл упомянуть, что я не контролирую скрытие и стиль DIV. Мой сценарий воспроизводится с изображениями и предназначен для интеграции на любой странице, поэтому именно пользователь скрывает / показывает / изменяет значения.

Answer 1

Используйте .css(), чтобы получить сохраненное значение вместо этого, например так:

jQuery('img').css('height');

Я знаю, это звучит немного странно, , но прежде чем отклонить его, попробуйтеэто :)

Answer 2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="file" id="file" />
<script type="text/javascript" charset="utf-8">
$("#file").change(function(e) {
    var file, img;
    file = document.getElementById("file");
    if (file!=null) {
        img = new Image();
        img.src = file.value;
        img.onload = function() {
            alert(img.width + " " + img.height);
        };
        img.onerror = function() {
            alert( "not a valid file: " + file.type);
        };
    }

});
</script>

Answer 3

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

var dimensions = {width: $(img).width(), height: $(img).height()};
$(img).hide();

Или когда вы не можете сделать это, потому что скрытие и необходимость в значении распределены, вы можете сохранить высоту и ширину в объекте данных

$(img).data('dimensions', {width: $(img).width(), height: $(img).height()});

Затем вы можете получить к ним доступ следующим образом:

 $(img).data('dimensions').width;

Вы даже можете убедиться, что все изображения на странице имеют эти свойства данных, используя следующий код:

$(document).ready(function(){
    $('img').each(function(){ //embedded images
        $this = $(this);
        $this.data('dimensions', {width: $this.width(), height: $this.height()});
    });
    $('img').live('load', function(){ //inserted images
        $this = $(this);
        $this.data('dimensions', {width: $this.width(), height: $this.height()});
    });
});

Answer 4

То же, что мой ответ здесь:

Преобразование строки ширины CSS в обычное число

Вместо того, чтобы скрывать ее с помощью .hide() (display: none), вы можетескрыть его с помощью .css('visible', 'hidden'), тогда .width()/.height() будет работать.

Если вы не хотите менять .hide() ´s, вы можете применить visible: hidden, а затем .show() и затем измерить высоту.После того, как вы измерили это, переверните это.Объекты по-прежнему влияют на макет страницы, когда они скрыты с помощью visible: hidden - остерегайтесь этого.

Чтобы избежать тегов, которые портятся в макете, вы можете установить абсолютное положение, переместить его в тег body, а затемизмерение.