не может получить истинную высоту / ширину объекта в Chrome

Question

У меня вопрос, если я устанавливаю высоту изображения в css и пытаюсь получить высоту / ширину, я получаю разные результаты в разных браузерах. Есть ли способ получить одинаковое измерение во всех браузерах?

Вы можете найти живой пример здесь <- Удалено </p>

и концепция такова:

CSS:
img{
  height:100px;
  }

Script:
$(document).ready(function(){
    $("#text").append($("#img_0").attr("height"));
    $("#text").append($("#img_0").attr("width"));
});

Выход Firefox: высота изображения: 100 ширина картинки: 150

Выход Chrome: высота изображения: 100 ширина картинки: 0

Выход Chrome: высота изображения: 100 ширина картинки: 93?

я пробовал это из StackOverflow: stackoverflow.com/questions/1873419/jquery-get-height-width

но все равно получите тот же результат

Кто-нибудь знает хорошее решение?

Answer 1

Изображения не загружаются в document.ready, вам нужно использовать событие window.load, чтобы убедиться, что они присутствуют, например:

$(window).load(function(){
    $("#text").append($("#img_0").height());
    $("#text").append($("#img_0").width());
});

Вот краткая информация о разнице , важная часть в том, что изображения загружаются.

Answer 2

Ответ Ника Крэйвера на использование $ (window) .load () правильный, но у изображений также есть метод load (), который позволяет более детализированную детализацию, особенно если возможно загружать несколько изображений.

  $(document).ready(function(){ 
    $("#top_img_0").load (function (){
      $("#text").append( "height: " + $("#top_img_0").attr("height")+"<br/>" );
      $("#text").append( "width: " + $("#top_img_0").attr("width")+"<br/>" );   
      }); 
  });

Answer 3

Похоже, что это состояние гонки, по крайней мере, для меня это было использование Chrome. Изображение не загружается в тот момент, когда вы получаете размеры. Я настроил все на срабатывание после 200 мс и отображается реальная ширина / высота.

    $(document).ready(function() {
        setTimeout("getImageDimensions()", 200);
    });

    function getImageDimensions() {
        var pic_real_width;
        var pic_real_height;

        $("#topContent img").each(function() {
            var $this = $(this);
            $this.removeAttr("width");
            $this.removeAttr("height");
            $this.css({ width: 'auto', height: 'auto' });

            pic_real_width = $this.width();
            pic_real_height = $this.height();
            $this.css({ width: '', height: '100px' });
        });

        $("#text").append(" height: " + pic_real_height/*$("#top_img_0").attr("height")*/ + "<br/>");
        $("#text").append(" width: " + pic_real_width/*$("#top_img_0").attr("width")*/ + "<br/>");
    }

Протестировано и работает в Chrome, IE и Firefox. Весь дисплей 2008 x 3008.

Answer 4

Заменить

$this.css({width: '', height: ''}); 

с

$this.css({width: 'auto', height: 'auto'});

Opera 10.10 высота / ширина 2008 x 3008