我想知道 window.onload = function(){} (或者任何其他类型的加载，如 jQuery $(document).ready(); 是必需的，如果代码放在我的 <body> 的底部？
或者可能会出现意想不到的副作用？
最佳答案
是的，可能会有意想不到的后果。但是，不，这不是绝对必要的。对于仍在加载的内容，如复杂的布局、深层 DOM 结构、来自其他脚本的动态 HTML 或图像，时间可能会关闭。为避免这些情况，将脚本包装在 onload 事件中始终是最安全的。
这里有一些例子可以证明这一点。所有示例都在 OS X 上的 Chrome 17.0.963.12 dev 上测试。当不使用 onload 时，浏览器结果可能会有所不同，这表明其不可预测的行为。如果结果与您的预期不同(即您的设计指定的结果)，这些示例将返回 fail，如果结果与您的预期相匹配，则返回 success。使用 onload，它们总是返回 success。
示例 1
在此示例中，代码期望图像具有特定宽度。如果代码包含在 onload 事件中，则宽度正确，否则不正确。
演示:http://jsfiddle.net/ThinkingStiff/qUWxX/
HTML:
<div id="result"></div>
<img id='image' src="http://thinkingstiff.com/images/matt.jpg" />
脚本:
document.getElementById( 'result' ).innerHTML
= document.getElementById( 'image' ).offsetWidth == 346 ? 'success': 'fail';
您会看到页面左上角的 jsFiddle 设置为“onLoad”，图像上方的结果是成功。
将其更改为“onDomReady”或“不换行(正文)”:
现在点击页面左上角的“运行”:
图像上方的结果现在将是失败。
例子2
这是另一个不使用图像的示例。在这一个中，内联脚本已添加到 HTML 中。代码期望宽度是内联脚本设置的宽度。使用 onload 是正确的，没有则不是。在此演示中使用与之前相同的说明。
演示:http://jsfiddle.net/ThinkingStiff/n7GWt/
HTML:
<div id="result"></div>
<div id="style"></div>
<script>
window.setTimeout( function() {
document.getElementById( 'style' ).style.width = '100px';
}, 1 );
</script>
脚本:
document.getElementById( 'result' ).innerHTML
= document.getElementById( 'style' ).style.width ? 'success' : 'fail';
示例 3
这是一个在正文中不使用图像或 Javascript，仅使用 CSS 的示例。同样，onload 和 not 之间的结果是不同的。
演示:http://jsfiddle.net/ThinkingStiff/HN2bH/
CSS:
#style {
animation: style 5s infinite;
-moz-animation: style 5s infinite;
-ms-animation: style 5s infinite;
-o-animation: style 5s infinite;
-webkit-animation: style 5s infinite;
border: 1px solid black;
height: 20px;
width: 100px;
}
@keyframes style { 0% { width: 100px; } 100% { width: 500px; } }
@-moz-keyframes style { 0% { width: 100px; } 100% { width: 500px; } }
@-ms-keyframes style { 0% { width: 100px; } 100% { width: 500px; } }
@-o-keyframes style { 0% { width: 100px; } 100% { width: 500px; } }
@-webkit-keyframes style { 0% { width: 100px; } 100% { width: 500px; } }
HTML:
<div id="result"></div>
<div id="style"></div>
脚本:
document.getElementById( 'result' ).innerHTML
= document.getElementById( 'style' ).clientWidth > 100 ? 'success' : 'fail';
在太多情况下，不包装代码会导致您无法预料的问题。为避免这些情况，将脚本包装在 onload 事件中始终是最安全的。
关于javascript - 代码在底部时是否需要 'onload'？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8717401/