代码之家 › 专栏 › 技术社区 › Berlin Brown

javascript:让body onload函数等待脚本完成

dhtml html javascript

Berlin Brown · 技术社区 · 16 年前

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

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

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

这是工作流程。

调用getElementByID(“someDiv”)从页面获取元素。
调用函数somefunc,此函数位于body onload=somefunc()中
等到某个功能完成
在我的功能完成后向用户显示页面。

3 回复 | 直到 16 年前

Phil Booth 16 年前

您可以做的是将页面内容保存在 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的叔叔:页面似乎延迟了加载,直到脚本完成。

Alex Rozanski 16 年前

在中调用的函数 <body> 泰格 onLoad 事件仅在加载DOM时激发(但它不等待加载外部依赖项,如javascript文件和css),因此可以确保 someFunc() 调用函数(如果附加到 <身体& 泰格 重载 事件)页面中的元素已加载。如果要访问加载在页面中的DIV,则可以确保当 Soad函数() 调用函数。

为了解决您的问题,您可以使用 display 其初始设置为 none . 然后当页面加载后, Soad函数() 调用函数。完成执行后,可以设置 显示 你的包装部门 block ,以便用户可以看到它。

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