Question

我想知道如果代码放在window.onload = function(){}的底部，$(document).ready();（或任何其他类型的onload，如jQuery <body>是否必要？

或者可能出现非常意外的副作用？

Answer 1

是的，可能会有意想不到的后果。但是，不，这不是绝对必要的。对于仍在加载的内容，例如复杂的布局，深度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”，图片上方的结果为success。

enter image description here

将其更改为“onDomReady”或“no wrap（body）”：

enter image description here

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

enter image description here

图片上方的结果现在为fail。

示例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之间的结果也不同。

演示：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事件中总是最安全的。

Answer 2

一些不同的事情正在发生。

onload。这意味着您可以将代码放在onload中，这取决于那里的内容。
在页面的DOM（即内部结构）完全加载之前，就会触发就绪处理程序。这不是与将它放在底部不同，但有一点不同的是，如果有人离开您的页面然后返回，这些处理程序将再次触发。

从技术上讲，在文档末尾运行的脚本可以使用getElementById之类的方法来提取已经呈现的元素。出于上述原因，您可能仍希望将它们放入就绪或加载处理程序中。这并不是说脚本本身不应该位于底部 - 从那里获得感知性能仍然有益。

Answer 3

HTML页面底部的脚本标记等同于DOMContentLoaded。已下载所有html代码，Javascript现在能够访问DOM元素。

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

当代码位于底部时，是否需要'onload'？

3 个答案:

示例1

示例2

示例3