Question

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

现在，我正在调用正文中的函数onload。

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

这是工作流程。

调用getElementById（'someDiv'）从页面获取元素。
调用someFunc函数，这个函数在body中onload = someFunc（）
等到someFunc完成
我的功能完成后，向用户显示页面。

Answer 1

您可以做的是将您的网页内容保存在最初使用div设置样式的display:none中。然后，当您的javascript代码完成后，将div上的样式更新为display: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>

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

Answer 2

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

要解决您的问题，您可以将您的网页内容包装在DIV中，其中display最初设置为none。然后，当页面加载时，将调用someFunc()函数。执行完毕后，您可以将包装器DIV的display设置为block，以便用户可以看到它。

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

Answer 3

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

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

3 个答案: