logo标签列表

onload动作和底部脚本中的动作有什么区别？

javascripthtml
4
使用 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>

第二种方法对我来说更好，特别是当页面加载时需要执行更多的操作。但也许有我不知道的陷阱？
onload 会等待所有图片、iframe 等加载完毕后再执行，而底部的 <script> 则不会。 - fuyushimoya
1
仅在需要某些视觉效果的情况下使用 onload，以获取当时未知的图像尺寸。 - dandavis
2个回答
7
是的，有的。将您的代码放在底部就像将其放在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
2
到目前为止最好的解释。 - Mladen Oršolić
4

onload 文档 来自Mozilla：

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

将脚本放置在页面底部将在浏览器渲染HTML后立即运行。

为了感知效果，如果需要，可以将您的脚本放置在页面底部的onload回调中进行组合。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接