Question

使用body onload之间是否有任何功能差异：

<!DOCTYPE html>
<html>
<head>
    <title>testing body onload</title>
</head>
<body onload="fu('this is from body onload')">
    <h2 id="I1">nothing yet</h2>
    <script>
        function fu (msg) {
            document.getElementById("I1").innerHTML = msg ;
        }
    </script>
</body>
</html>

一方面在身体的末端执行一个脚本：

<!DOCTYPE html>
<html>
<head>
    <title>testing body onload</title>
</head>
<body>
    <h2 id="I1">nothing yet</h2>
    <script>
        function fu (msg){
            document.getElementById("I1").innerHTML = msg ;
        }
        fu('this is from bottom script') ;
    </script>
</body>
</html>

第二个对我来说似乎更好，当然在加载页面时还有更多动作要做。但也许有一个我不知道的陷阱？

Answer 1

是的，有。将代码置于底部就像把它放在domready事件中，而不是onload。

Domready意味着已经读取了html代码（所以dom已准备好，或者换句话说，你现在可以找到带有js选择器的dom元素），而onload意味着所有资产（img，css等等）也被加载（所以，更长的事件）。

编辑：

另请参阅MDN文档：

（这基本上就像jquery的domready，它是一个文档对象的事件）： https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

这是onload事件，它是一个窗口对象的事件： https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

Answer 2

来自Mozilla的

onload documentation：

加载事件在文档加载过程结束时触发。在至此，文档中的所有对象都在DOM中，而且都是图像，脚本，链接和子框架已完成加载。

只要浏览器呈现 HTML，就会在页面底部放置脚本。

出于感知目的，如果需要，我会将两者结合起来并将脚本放在页面底部的onload回调中。

什么是onload动作和底部脚本中的动作之间的区别

2 个答案: