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渲染的结束,因为我不知道哪个函数将是最后一个函数。
3 个解决方案
#1
8
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中这可以写成$(窗口).load())在获取所有静态资产后运行。在至少DOM准备好之后,你的Ajax调用都会激活,并且在所有这些调用之后没有定义的事件。为此,您需要自己跟踪它们。你可以使用“最后一匹马从谷仓”的方法。在Ajax调用结束时添加一小部分逻辑,看它是否是最后一个,并引发一个名为“reallyAllDone”的自定义事件
#2
-1
Yes onload
<body onload="load()">
That would detect when the contents of the body have loaded.
这将检测身体内容何时加载。
#3
-2
$(document).ready
will help you to know when the dom has finished its event and its ready
将帮助您了解dom何时完成其活动并准备就绪
#1
8
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中这可以写成$(窗口).load())在获取所有静态资产后运行。在至少DOM准备好之后,你的Ajax调用都会激活,并且在所有这些调用之后没有定义的事件。为此,您需要自己跟踪它们。你可以使用“最后一匹马从谷仓”的方法。在Ajax调用结束时添加一小部分逻辑,看它是否是最后一个,并引发一个名为“reallyAllDone”的自定义事件
#2
-1
Yes onload
<body onload="load()">
That would detect when the contents of the body have loaded.
这将检测身体内容何时加载。
#3
-2
$(document).ready
will help you to know when the dom has finished its event and its ready
将帮助您了解dom何时完成其活动并准备就绪