Question

当在Jquery中渲染页面时尝试获取元素尺寸时，我经常发现自己必须设置这样的超时：

window.setTimeout(function(){
    console.log("calculate footer height");
    console.log( $('div:jqmData(role="footer")') )
    console.log(  wrap.find('.ui-footer').css("height") )
    },0);

返回正确的值（在46px的情况下），同时执行此操作而没有超时

    console.log("calculate footer height");
    console.log( $('div:jqmData(role="footer")') )
    console.log(  wrap.find('.ui-footer').css("height") )

将返回元素，但其宽度将为0px

问题：
为什么它是这样的，更重要的是，有没有比在示例中使用setTimeouts更好的方法？请注意：我不能影响元素的渲染，因为这是由Jquery Mobile完成的，所以上面必须从不同的“位置”运行

谢谢！

Answer 1

你应该回应onload事件

例如：

$( function() {

    console.log("calculate footer height");
    console.log( $('div:jqmData(role="footer")') );
    console.log(  wrap.find('.ui-footer').css("height") );

} );

您的超时允许浏览器呈现，因此您可以检索正确的值。使用onload变量等待页面加载然后被触发。

通常还有一些其他符号，如

$( document ).ready( function() { .... });

的

$().ready( function() { .... });

我更喜欢

(function($) {
    $( function() { ... } );
} ( jQuery ) );

确保$代表jQuery

Answer 2

确定。还没有找到解决方案，但我将问题追溯到以下内容：

插件A加载，初始化被阻止，因此元素不会得到它们的尺寸。
插件B在初始化插件A的过程中被加载并初始化。
插件B然后尝试获取元素尺寸，但由于A尚未完全贯穿，元素仍然未增强（=没有类，没有宽度）

我还没有找到解决方法，因为
a）我需要手动触发插件A（= Jquery Mobile），否则它不会与requireJS（初始化mobileinit vs docReady）和 b）我自己的插件需要在Jquery Mobile初始化之前设置事件绑定，所以我需要一个手动触发器。

如果有人知道解决方法，我会检查答案。

感谢发帖。

为什么在获取元素尺寸之前需要延迟？

2 个答案: