如何通过innerWidth()获取插入到DOM中的对象的维数(即innerWidth)

Question

在一个复杂的AJAX站点上，我需要检索新插入的DOM对象的CSS维，即某个DIVs的值，这样我就可以将加载的图像调整到它们的父维度。

我将通过jQuery.load()-POST将新内容加载到DOM中：

$( 'DIV#newStuff' ).load( 'insertthis.ajax', {id:1}, function() {
    var iMaxWidth = $( 'DIV#widthNeeded' ).innerWidth();
    console.log(iMaxWidth);
} );

问题： FireFox (PaleMoon) 9.2 =>按预期返回"442“。Maxthon 3和Chrome 17 =>返回"0“或更高的值"736”。都在Win7上。jQuery 1.7.1

我还尝试了具有相同结果的jQuery.actual()-plugin。

清洁:这是一个非常简化的实际功能的摘录。我只是想展示一下核心问题。加载的脚本是普通PHP (我将扩展更改为.ajax)。

的解决方案(解决方案)：用一个额外的setTimeout()-function包装成功的回调代码，可能会给一些浏览器计算新呈现的DOM元素的维度所急需的时间。

$( 'DIV#newStuff' ).load( 'insertthis.ajax', {id:1}, function() {
    setTimeout( function() {
        var iMaxWidth = $( 'DIV#widthNeeded' ).innerWidth();
        console.log(iMaxWidth);
    }, 500 );
} );

Answer 1

回答你修订后的问题：

我不明白你为什么会有这样的不一致。您可能需要给浏览器一段时间重新流或其他东西，方法是有效地完成以下操作：

$( 'DIV#newStuff' ).load( 'insertthis.ajax', {id:1}, function() {
    setTimeout(function() {
        var iWidth = $( 'DIV#widthNeeded' ).innerWidth();
        var jqWidthKeeper = $( 'DIV#widthKeeper' );
        var iMaxWidth = jqWidthKeeper.actual( 'innerWidth' );
        console.log(iMaxWidth);
    }, 0);
} );

jQuery在更新元素后立即调用load回调。我有时见过浏览器需要您给它们的呈现线程一点时间重新流。