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

Question

我正在努力获取通过 jQuery 的 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 几个 hudert。

问题是，这个.width() 和.height() 函数返回像69 和32px 这样的小数。哪些是错误的。我什至尝试了.css() 函数，但结果完全相同。

有趣的是，如果我在不同的浏览器中尝试，我会得到不同的结果。在 IE9 中，当我第二次单击<a> 时，我什至得到了正确的结果。这对我来说真的很神秘。

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

根据我的研究，我发现这篇文章：Can't get ajax - loaded image's height and width via 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>