getBoundingClientRect()不一致
getBoundingClientRect()不一致
提问于 2018-03-19 13:02:50
我对DOMnode.getBoundingClientRect()有一个问题，因为返回的数据不一致。我正在使用windows.onload (因为没有更好的选项)来触发我的函数，它需要一个元素的getBoundingClientRect().height来对它进行计算。
问题是，元素的高度并不总是一致的。据我所知，window.onload甚至应该在页面生命周期中一直运行，并且应该在那时加载内容、样式表和外部资源，但是该页面显然仍然没有正确地呈现它，因为我有时得到的高度值大约为400,528,630，有时它对我试图读取的元素是正确的(700)。
有什么想法？
是否有其他方法来检测div (或页面)自身是否已完全呈现？
Stack Overflow用户
回答已采纳
发布于 2018-03-19 13:09:17
window的load确实意味着所有资源(包括样式表和图像)都已加载或失败，但是：
- 这不一定意味着浏览器已经完全呈现了结果，并且
- 如果其他JavaScript代码运行在
load上并对事物进行更改，这些更改也可能会影响您所看到的内容(当然)
解决#2将特定于正在运行的代码，但是如果您的问题仅仅是#1，那么一个简短的setTimeout应该修复它：
window.onload = function() {
setTimeout(function() {
// Your code here
}, 60);
};你可能不得不拖延时间了。对于Chrome来说，0是可行的，但是Firefox通常想要在50-60ms的范围内。
或者仅仅是requestAnimationFrame可能就足够了：
window.onload = function() {
requestAnimationFrame(function() {
// Your code here
});
};您可以将上述的一个或另一个与document.readyState是"complete"的检查结合起来，因为这是浏览器做的最后一件事 (当然，除了设置为在完成时运行的JavaScript代码之外)。例如：
window.onload = function() {
function ready() {
// Your code here
}
function checkReady() {
if (document.readyState === "complete") {
ready();
} else {
setTimeout(checkReady, 0);
}
}
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49363676
复制相关文章
相似问题
腾讯云开发者
