3

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

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

另外，我可能遇到的另一个问题是我需要访问 html 内容中的 div 元素，我可以在我的正文 onload 函数（getElementById（'somDiv'）中这样做吗？

这是工作流程。

  1. 调用 getElementById('someDiv') 以从页面中获取元素。

  2. 调用函数someFunc，这个函数在body onload=someFunc()

  3. 等到 someFunc 完成

  4. 我的功能完成后向用户显示页面。

4

3 回答 3

5

您可以做的是将您的页面内容保留在div最初样式为display:none. 然后，当您的 javascript 代码完成时，更新divto上的样式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>

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

于 2009-06-04T17:31:09.230 回答
1

<body>在标签事件中调用的函数onLoad仅在加载 DOM 时触发（但它不会等待加载 JavaScript 文件和 CSS 等外部依赖项），因此您可以确定在someFunc()调用函数时，（如果附加到<body>标签的onLoad事件）页面中的元素已被加载。如果您想访问页面中加载的 DIV，那么您可以确保在someFunc()调用您的函数时它已经加载。

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

但是，请确保让用户知道页面正在加载，并且在加载 JavaScript 时不要简单地向他们显示空白屏幕。

于 2009-06-04T17:43:04.533 回答
0

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

于 2009-06-04T17:27:33.230 回答