Javascript：使用body onload函数等待脚本完成

I have some functions that I am calling and they take some time (milliseconds), but I don't want the page to display until these functions have completed. Right now, I can tell that the page loads and then the scripts eventually complete.

我有一些我正在调用的函数,它们需要一些时间(毫秒),但我不希望页面显示,直到这些函数完成。现在,我可以告诉页面加载,然后脚本最终完成。

Right now, I am calling the functions in the body onload.

现在,我正在调用body onload中的函数。

Also, another issue I may have is that I need to access div elements in the html content, can I do that in my body onload function (getElementById('somDiv')?

另外,我可能遇到的另一个问题是我需要访问html内容中的div元素,我可以在我的body onload函数(getElementById('somDiv')中执行此操作吗?

Here is the workflow.

这是工作流程。

Make a call to getElementById('someDiv') to get an element from the page.

调用getElementById('someDiv')来获取页面中的元素。
Invoke the function someFunc, this function is in the body onload=someFunc()

调用someFunc函数,这个函数在body中onload = someFunc()
Wait until someFunc is finished

等到someFunc完成
Display page to user once my function has completed.

功能完成后,向用户显示页面。

3 个解决方案

#1

What you could do is keep your page content in a div that is initially styled with display:none. Then when your javascript code finishes, update the style on the div to display:block, e.g.:

您可以做的是将页面内容保存在最初使用display:none设置样式的div中。然后,当您的javascript代码完成时,更新div上的样式以显示:block,例如:

<html>
    <head>
        ...
        <style type="text/css">
            html, body, #body {
                height: 100%;
                width: 100%;
                padding: 0;
                margin: 0;
            }
            #body {
                display: none;
            }
        </style>
        <script type="text/javascript">
            function myFunc() {
                ...
                getElementById('body').style.display = 'block';
            }
        </script>
    </head>
    <body onload="myFunc();">
        <div id="body>
            ...
        </div>
    </body>
</html>

Then Bob's your uncle: the page looks like it has delayed loading until after your script is finished.

然后鲍勃是你的叔叔:页面看起来已经延迟加载,直到你的脚本完成。

#2

Functions that are called in the <body> tag's onLoad event are only fired when the DOM is loaded (however it does not wait for external dependencies such as JavaScript files and CSS to load), so you can be sure that when your someFunc() function is called, (if attached to the <body> tag's onLoad event) the elements in the page have been loaded. If you want to access a DIV that is loaded in the page then you can be sure that it will have loaded when your someFunc() function is called.

在标记的onLoad事件中调用的函数仅在加载DOM时触发(但它不等待外部依赖项,如JavaScript文件和CSS加载),因此您可以确定当您的someFunc()时函数被调用(如果附加到标签的onLoad事件),页面中的元素已被加载。如果要访问页面中加载的DIV,则可以确保在调用someFunc()函数时它已加载。

To solve your problem you could wrap then content of your page in a DIV, with the display of it set initially to none. Then when the page has loaded, your someFunc() function is called. When it has finished executing, you can set the display of your wrapper DIV to block, so that it is visible to the user.

要解决您的问题,您可以将页面内容包装在DIV中,并将其显示最初设置为无。然后当页面加载时,调用someFunc()函数。完成执行后,您可以将包装器DIV的显示设置为阻止,以便用户可以看到它。

However, make sure that you make the user aware that the page is loading, and you do not simply show them a blank screen whilst your JavaScript is loading.

但是,请确保让用户知道页面正在加载,并且您在加载JavaScript时不会只是向他们显示空白屏幕。

#3

The body's onLoad function is triggered when the DOM has completed loading - which implies that all HTML elements have been fully loaded. So your onload function itself should assume that everything is loaded and ready to go, since its very execution is under those guidelines.

当DOM完成加载时,将触发正文的onLoad函数 - 这意味着所有HTML元素都已完全加载。所以你的onload函数本身应该假设所有内容都已加载并准备就绪,因为它的执行是在这些指导下进行的。

#1