getBoundingClientRect() 不一致

Question

我对 DOMnode.getBoundingClientRect() 有问题，因为返回的数据不一致。我正在使用windows.onload（由于缺乏更好的选择）来触发我的函数，该函数需要一个getBoundingClientRect().height元素来对其进行一些计算。

问题是，元素的高度并不总是一致的。window.onload据我所知，甚至应该在页面生命周期中最后触发，并且内容、样式表和外部资源都应该在那时加载，但是页面显然仍然没有正确呈现，因为我有时会得到像 400 这样的高度值、528、630，有时对于我要读取的元素来说是正确的（700）。

想法？

是否有其他方法可以检测 a div（或页面）何时已完全呈现？

Answer 1

window确实load意味着所有资源（包括样式表和图像）已加载或失败，但是：

1. 这并不一定意味着浏览器已经完全渲染了结果，并且
2. 如果其他 JavaScript 代码正在运行load并发生更改，这些更改也可能会影响您所看到的内容（当然）

解决 #2 将特定于正在运行的代码，但如果您的问题只是 #1，则setTimeout应该可以解决它：

window.onload = function() {
    setTimeout(function() {
        // Your code here
    }, 60);
};

你可能不得不忍受延迟。0 往往适用于 Chrome，但 Firefox 往往需要至少 50-60 毫秒范围内的值。

或者可能就requestAnimationFrame足够了：

window.onload = function() {
    requestAnimationFrame(function() {
        // Your code here
    });
};

您可以将上述一项或多项与检查结合起来，因为这是document.readyState浏览器执行的最后一件事（当然，除了设置为在完成时运行的 JavaScript 代码之外）。例如："complete"

window.onload = function() {
    function ready() {
        // Your code here
    }
    function checkReady() {
        if (document.readyState === "complete") {
            ready();
        } else {
            setTimeout(checkReady, 0);
        }
    }
};