Question

I’m struggling with geting width and height of block, which is loaded via jQuery’s AJAX .load function.

In my HTML markup I have links:

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

and my 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);
            });
        }); 
});

So when i trigger the .click, AJAX loads the content of image.htm just fine. There is one big image and div with description. This is appended at end of body tag. When I inspect it in DOM inspector, it has width and height few hudert because of that image.

Problem is, that this .width() and .height() functions returns nubers like 69 and 32px. Which are wrong. I even try .css() function, but with very same result.

Funny thing is, that if I try it in different browsers, I got different results. In IE9, when I click the <a> second time, I even got right results. This is really mystery for me.

The two divs in my code have their meaning, I will use them for Fancybox, but I need correct width and height of that content to do that…

From my research, I found this article: Can't get ajax – loaded image's height and width via jquery which have similar problem, but solutions posted there didn’t work for me.

Thanks in advance for every sugestion, how to solve this.

Answer 1

ok, i see your issue now – thanks for the guidance..

the dimensions reported by your code are correct at the point of execution. See annotations of your code below:

$('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);
});

change your JS to this:

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);
        }); 
});

then modify the appropriate element in your loaded HTML to call showDimensions onLoad, e.g.:

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