javascript 检测 HTML 何时在页面上完成加载和呈现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12635577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect when HTML has finished loading AND rendering on the page
提问by oshirowanen
Is it possible to detect when HTML has finished loading AND rendering on the page? If so, how?
是否可以检测到 HTML 何时在页面上完成加载和呈现？如果是这样，如何？
The page consists of HTML, calls to ajax, receives data back from ajax calls, lots of javascript stuff and some images too. I would like to detect when everything has finished. What I can't do is stick a function call at the end, because I don't know when the end is.
该页面包含 HTML、对 ajax 的调用、从 ajax 调用接收数据、大量的 javascript 内容和一些图像。我想检测一切何时完成。我不能做的是在最后贴一个函数调用，因为我不知道什么时候结束。
For example, the page has lots of ajax style elements which users can pick and choose from, i.e. user 1 might have a different number of elements than user 2 and even in a different order.
例如，页面有很多 ajax 样式元素，用户可以从中挑选和选择，即用户 1 的元素数量可能与用户 2 的元素数量不同，甚至顺序不同。
So what I can't do is use the last function to simulate the end of HTML rendering, because I won't know which function will be the last function.
所以我不能做的是用最后一个函数来模拟HTML渲染的结束，因为我不知道哪个函数会是最后一个函数。
采纳答案by Jason Sperske
The problem with answering your question is in the last few sentences where you say that you don't know where the end is because of user choices. There are two automatic events you can bind JavaScript to. What jQuery calls $(document).ready()which means the DOM is ready for manipulation (before images load and after external scripts and CSS are loaded) and what is more commonly called body onload(in jQuery this can be written as $(window).load()) which runs after all static assets are fetched. Your Ajax calls will all fire after at least the DOM is ready and there is no defined event for what happens after all of them. For that you need to keep track of them on your own. You could use a "last horse out of the barn" approach. Add a small bit of logic to the end of your Ajax calls to see if it is the last and raise a custom event called "reallyAllDone"
回答你的问题的问题是在最后几句话中，你说你不知道终点在哪里，因为用户的选择。您可以将 JavaScript 绑定到两个自动事件。什么 jQuery 调用$(document).ready()意味着 DOM 已准备好进行操作（在加载图像之前和加载外部脚本和 CSS 之后）以及更常见的称为 body onload（在 jQuery 中，这可以写为$(window).load()) 在获取所有静态资产后运行。至少在 DOM 准备好之后，您的 Ajax 调用将全部触发，并且没有为所有这些调用之后发生的事情定义事件。为此，您需要自己跟踪它们。您可以使用“最后一匹马走出谷仓”的方法。在 Ajax 调用的末尾添加一点逻辑以查看它是否是最后一个并引发一个名为“reallyAllDone”的自定义事件
回答by noel
回答by Chandra Sekhar Walajapet
$(document).ready
$(document).ready
will help you to know when the dom has finished its event and its ready
将帮助您了解 dom 何时完成其事件并准备就绪
