javascript - getBoundingClientRect() 不一致

Question

我对 DOMnode.getBoundingClientRect() 有疑问，因为返回的数据不一致。我正在使用 windows.onload(因为缺少更好的选择)来触发我的函数，该函数采用元素的 getBoundingClientRect().height 来对其进行一些计算.

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

想法？

是否有其他方法可以检测 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 是否为 “complete” 结合起来，因为那是 the very last thing the browser does (当然，JavaScript 代码设置为在完成时运行除外)。例如:

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