Jquery .height 和 .width 在 ajax 内容上返回错误的数字

Question

我正在努力获取块的宽度和高度，该块是通过 jQuery 的 AJAX .load 函数加载的。

在我的 HTML 标记中，我有 links:

<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 中，当我第二次单击 时，我什至得到了正确的结果。这对我来说确实是个谜。

我的代码中的两个 div 有其含义，我将它们用于 Fancybox，但我需要该内容的正确宽度和高度才能做到这一点...

根据我的研究，我找到了这篇文章： 无法通过 jquery 获取 ajax - 加载图像的高度和宽度 具有类似的功能问题，但那里发布的解决方案对我不起作用。

预先感谢您的每一个建议，如何解决这个问题。

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>