Window.onload与过程执行

Window.onload vs procedural execution

本文关键字：执行 过程 onload Window      更新时间：2023-09-26

当使用过程风格时，代码似乎是用错误的元素宽度维度执行的（我怀疑代码是在元素创建完成之前执行的），当我刷新页面时，一切都很好。

问题：

<html>
    <head></head>
    <body>
        <div id="parent">
        </div>
        <script language="javascript" type="text/javascript">
            create_object(); // Creates an element and puts it inside div parent
        </script>
    </body>
</html>

解决方案：

<html>
    <head>
        <script language="javascript" type="text/javascript">
            window.onload = function(){
                create_object(); // Creates an element and puts it inside div parent
            }
        </script>
    </head>
    <body>
        <div id="parent">
        </div>
    </body>
</html>

有什么区别？window.onload当然会等待页面加载，但由于在元素之后。。这不是很好吗？

页面上没有执行其他java脚本。

window.onload在调用其回调之前等待加载所有页面资源（如图像和样式表）。在您的第一个示例中，DOM元素都将存在（因为您的代码在解析之前的内容之后在主体的末尾执行），但外部资源（如图像）可能尚未加载，因此可能尚未实现最终布局，因此所有内容可能尚未有其最终大小/布局。

window.onload是在DOM树准备好并加载所有资源（图像、脚本、样式表…）时执行的。如果您在没有此回调的情况下在body中加载脚本，那么如果您将图像或样式表加载到此块中，则您的div宽度可能是错误的。。。

相关文章：