Javascript 是'；onload'；代码在底部时是否需要？

我想知道

window.onload=function（）{}

（或者任何其他类型的onload，比如jQuery

$（document）.ready（）；

，如果代码放在我的

的底部，是否有必要

---

或者可能会有非常意外的副作用？

是的，可能会有意外的后果。但是，不，这不是绝对必要的。对于仍在加载的内容，例如复杂的布局、深层DOM结构、来自其他脚本的动态HTML或图像，时间可能会被推迟。为了避免这些情况，包装您的纸条总是最安全的t在

onload

事件中

这里有一些例子可以证明这一点。所有的例子都是在Chrome 17.0.963.12开发版OS X上测试的。如果不使用

onload

，浏览器的结果可能会有所不同，这表明了它的不可预测的行为。如果结果与您预期的不同（即您的设计所指定的），这些例子将返回

fail

当结果与预期相符时，返回

success

。使用

onload

时，它们总是返回

success

例1 在本例中，代码希望图像具有一定的宽度。如果代码被包装在

onload

事件中，则宽度正确，否则就不正确

演示：

HTML:

脚本：

document.getElementById（'result'）.innerHTML
=document.getElementById（'image'）。offsetWidth==346？'success'：'fail'；

您将在页面的左上角看到JSFIDLE设置为“onLoad”，图像上方的结果是

success

将其更改为“onDomReady”或“无包裹（主体）”：

现在按页面左上角的“运行”：

现在，图像上方的结果将是

失败

例2 这里是另一个不使用图像的示例。在这个示例中，HTML中添加了一个内联脚本。代码希望宽度是内联脚本设置的宽度。使用

onload

它是正确的，没有，没有。使用与此演示相同的说明

演示：

HTML:

setTimeout（函数（）{
document.getElementById（'style'）.style.width='100px'；
}, 1 );

脚本：

document.getElementById（'result'）.innerHTML
=document.getElementById（'style'）.style.width？'success'：'fail'；

例3 这里有一个例子，在主体中不使用图像或Javascript，只使用CSS。同样，结果在

onload

和not之间是不同的

演示：

CSS:

#风格{
动画：风格无限；
-moz动画：风格无限；
-微软动画：风格无限；
-o动画：风格无限；
-webkit动画：风格无限；
边框：1px纯黑；
高度：20px；
宽度：100px；
}
@关键帧样式{0%{width:100px；}100%{width:500px；}
@-moz关键帧样式{0%{width:100px；}100%{width:500px；}
@-ms关键帧样式{0%{width:100px；}100%{width:500px；}
@-o-关键帧样式{0%{width:100px；}100%{width:500px；}
@-webkit关键帧样式{0%{width:100px；}100%{width:500px；}

HTML:

脚本：

document.getElementById（'result'）.innerHTML
=document.getElementById（'style'）.clientWidth>100？'success'：'fail'；

---

在太多的情况下，不包装代码可能会导致无法预料的问题。为了避免这些情况，最安全的做法是将脚本包装在

onload

事件中。

发生了两种不同的情况

onload

仅在加载图像等嵌入内容后调用。这意味着您可以将代码放入

onload

中，这取决于该内容是否存在

在此之前，当页面的DOM（即内部结构）完全加载时，会触发就绪处理程序。这与将其放在底部没有什么区别，但一个区别是，如果有人离开页面然后返回，这些处理程序将再次触发

---

从技术上讲，在文档末尾运行的脚本可以使用诸如

getElementById

之类的方法来拉入已呈现的元素。出于上述原因，您可能仍然希望将这些元素放入就绪或加载处理程序中。这并不是说脚本本身不应该位于底部-感知性能仍然有好处在HTML页面底部的脚本标记相当于

DOMContentLoaded

。所有HTML代码都已下载，Javascript现在能够访问DOM元素

---

load

是在所有其他资源（如图像）完全下载后调用的。

您是否有一些好文章解释为什么页面底部的代码是不可取的？我想知道更多关于这方面的信息。我不同意这是不可取的，仍然建议在底部使用脚本对不起，我不是建议使用scripts不应该放在底部。我会修改它。我不相信这是真的。我个人从未目睹过当我没有在

DOMContentLoaded

处理程序中包装我的代码时出现计时错误。当然，如果需要先加载非DOM资源，您将需要

load

处理程序。我也不同意这一点。如果HTML没有o被脚本引用在脚本之上，我从来没有遇到过问题。如果您需要访问脚本中的图像，它们可能不存在loaded@JeffreySweeney那么你认为不会有意外的后果吗？当OP发现

async

或

defer

作为一种加速方式时，或者他们开始执行ad时，情况会怎样为jQuery插件添加不同的脚本文件