Fatal编程技术网
  • javascript/
  • Javascript：让body onload函数等待脚本完成

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

javascript html

Javascript：让body onload函数等待脚本完成,javascript,html,dhtml,Javascript,Html,Dhtml,我正在调用一些函数，它们需要一些时间（毫秒），但我不希望在这些函数完成之前显示页面。现在，我可以看出页面加载，然后脚本最终完成 现在，我正在调用body onload中的函数 另外，我可能遇到的另一个问题是，我需要访问html内容中的div元素，我可以在body onload函数（getElementById（'somDiv'）中这样做吗 这是工作流程 调用getElementById（'someDiv'）从页面获取元素 调用函数someFunc，此函数位于body onload=someFun

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

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

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

这是工作流程

  • 调用getElementById（'someDiv'）从页面获取元素

  • 调用函数someFunc，此函数位于body onload=someFunc（）中

  • 等待someFunc完成

  • 我的功能完成后向用户显示页面

    • 当DOM完成加载时会触发body的onLoad函数，这意味着所有HTML元素都已完全加载。因此，onLoad函数本身应该假设所有内容都已加载并准备就绪，因为它的执行都遵循这些准则。

    您可以做的是将页面内容保存在
    div中de>最初使用
    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>

    

    
...
html，body，#body{
身高：100%；
宽度：100%；
填充：0；
保证金：0；
}
#身体{
显示：无；
}
函数myFunc（）{
...
getElementById（'body'）.style.display='block'；
}

    在
    标记的
    onLoad
    事件中调用的函数仅在加载DOM时触发（但它不会等待外部依赖项（如JavaScript文件和CSS）加载），因此可以确保在调用
    someFunc（）
    函数时，（如果附加到
    标记的
    onLoad
    事件）页面中的元素已加载。如果要访问页面中加载的DIV，则可以确保调用
    someFunc（）
    函数时已加载该DIV
    
为了解决您的问题，您可以将页面的内容包装在一个DIV中，其中的
    display
    最初设置为
    none
    。然后当页面加载后，您的
    someFunc（）
    函数被调用。当它完成执行后，您可以将包装器DIV的
    显示设置为
    块
    ，以便用户可以看到它
    

    但是，请确保您让用户知道页面正在加载，并且在加载JavaScript时不要简单地向他们显示一个空白屏幕。
    好主意，描述得很好。因为代码，我给了另一个人答案。