Javascript:让 body onload 函数等到脚本完成

标签 javascript html dhtml

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

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

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

这是工作流程。

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

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

  3. 等到 someFunc 完成

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

最佳答案

您可以做的是将您的页面内容保存在一个 div 中,该 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>

那么 Bob 就是你的叔叔:页面看起来已经延迟加载,直到你的脚本完成。

关于Javascript:让 body onload 函数等到脚本完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/951945/

相关文章:

javascript - 使用 jQuery 检查 URL 上 "/"后面的内容

javascript - 捕获 Promise 错误的最佳方法是什么?为什么?

php - html 中的时间戳

Java Applet,关于用户数据

javascript - 用于更新输入值的 Jquery Keyup 脚本不起作用

javascript - 如何创建 Twitter 小部件?

wordpress - 如何在 Wordpress 博客中添加 apple-touch-icons?

html - 我想在 html 中连接两个文本字段并在其他测试字段中显示结果

javascript - 悬停样式被 html 表格行中选定的样式覆盖

javascript - 使用 JavaScript 更改元素的图像