Jquery .height и .width возвращают неправильные числа в содержимом ajax

Question

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

В моей разметке HTML есть ссылки:

<a href="image.htm" class="image"><img src="galerie_thumb.jpg" /></a>

и мой JS:

$('document').ready(function() {
    $('body').append('<div id="hidden" style="display: inline-block;" />');
    $('div#hidden').append('<div id="fancy-content" style="display: inline-block;" />');
    $('a.image')
        .click(function(e) {
            e.preventDefault();
            var url = $(this).attr('href') + ' .image_wrap';
            $('div#fancy-content').load(url, function () {
                var height = $('#hidden').css('height');
                var width = $('#fancy-content').width();
                console.log(width);
                console.log(height);
            });
        }); 
});

Поэтому, когда я запускаю .click, AJAX загружает содержимое image.htm очень хорошо. Есть одно большое изображение и div с описанием. Это добавляется в конце тега body. Когда я проверяю его в DOM-инспекторе, из-за этого изображения у него width и height немного хадертов.

Проблема в том, что эти функции .width() и .height() возвращают такие нуберы, как 69 и 32px. Которые не правы. Я даже пробую функцию .css(), но с тем же результатом.

Забавно, что если я попробую это в разных браузерах, я получу разные результаты В IE9, когда я нажимаю <a> второй раз, я даже получаю правильные результаты. Это действительно загадка для меня.

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

Из моего исследования я нашел эту статью: Не могу получить ajax - высоту и ширину загруженного изображения с помощью jquery , которые имеют похожую проблему, но опубликованные там решения не сработали для меня.

Заранее благодарим за каждое предложение, как решить эту проблему.

Answer 1

хорошо, я вижу вашу проблему сейчас - спасибо за руководство ..

Размеры, указанные в вашем коде, верны на момент исполнения. Смотрите аннотации вашего кода ниже:

$('div#fancy-content').load(url, function () {
    var height = $('#hidden').css('height');
    var width = $('#fancy-content').width();

    // at this point the browser has received the HTML but *has not rendered it* (the browser has to perform a further GET request to acquire the image linked to by the "src" attribute - it doesn't yet know the dimensions of this image)
    console.log(width);
    console.log(height);
});

измени свой JS на это:

function showDimensions($jqueryObject) {
    console.log("width: " + $jqueryObject.width() + " height: " + $jqueryObject.height());
}

$('document').ready(function() {
    $('body').append('<div id="hidden" style="display: inline-block;" />');
    $('div#hidden').append('<div id="fancy-content" style="display: inline-block;" />');
    $('a.image')
        .click(function(e) {
            e.preventDefault();
            var url = $(this).attr('href') + ' .image_wrap';
            $('div#fancy-content').load(url);
        }); 
});

затем измените соответствующий элемент в загруженном HTML, чтобы вызвать showDimensions onLoad, например ::

<div id="theLoadedHtml"><img src="picture.jpg" onload="showDimensions($(this));"/></a></div>