Question

在复杂的AJAX网站上，我需要检索新插入的DOM对象的CSS维度，即某个DIV内部宽度的值，因此我可以将加载的图像大小调整为其父级维度。

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

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

问题： FireFox（PaleMoon）9.2 =＆gt;按预期返回“442”。 Maxthon 3和Chrome 17 =＆gt;返回“0”或更高的值“736”。两者都在Win7上。 jQuery 1.7.1

我也尝试了jQuery.actual（） - 插件，结果相同。

要清除：这是实际功能的非常简化的摘录。我只是想表明核心问题。加载的脚本是普通的PHP（我将扩展名更改为.ajax）。

解决方案（解决方法）： 使用额外的setTimeout（）函数包装成功回调代码，可以让一些浏览器急需时间来计算新呈现的DOM-stuff的维度。

$( '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回调。我有时会看到浏览器需要你给渲染线程一些时间来重排。

如何通过jQuery.load（）获取插入DOM的对象的维度（即innerWidth）

1 个答案: