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>

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

1 个答案: