当代码处于底部时，'onload'是否必要？ [英] Is the 'onload' necessary when the code is at the bottom?
问题描述
我想知道是否 window.onload = function（）{} （或其他类型的onload，比如jQuery $（document ）.ready（）;如果代码放在我的< body> ？
或者可能会出现意想不到的副作用？
。但是，不，这不是绝对必要的，对于仍在加载的东西，例如复杂的布局，深层的DOM结构，来自其他脚本的动态HTML或图像等，时机可能会关闭，为了避免这种情况，一个 onload 事件。 以下是一些演示此示例的示例。 OS X.如果不使用 onload ，浏览器结果可能会有所不同，这表明它的不可预知的行为。结果与你所期望的不同（即。你的设计指定了什么），并在结果与你期望的结果相符时返回 success 。使用 onload ，他们总是返回成功。
示例1
在这个例子中，代码期望图像具有一定的宽度。如果代码包装在 onload 事件中，宽度是正确的，否则不是。
演示：< a href =http://jsfiddle.net/ThinkingStiff/qUWxX/ =nofollow noreferrer> 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？ '成功'：'失败';
您会看到jsFiddle在页面的左上角设置为onLoad，并且图片上方的结果是 success 。
将其改为onDomReady或no wrap（body）：
/ p>
图像上方的结果现在将为失败。
示例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？ '成功'：'失败';
示例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纯黑色;
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？ '成功'：'失败';
有太多的场景，不包装你的代码会导致你无法解决的问题预见。为避免这些情况，将脚本封装到 onload 事件中始终是最安全的。
I was wondering if the window.onload = function(){} (or any other kind of onload, like the jQuery $(document).ready(); is necessary if the code is placed at the bottom of my <body>?
Or there could be highly unexpected side-effects?
Yes, there could be unexpected consequences. But, no, it's not absolutely necessary. The timing could be off for things still loading, like complicated layouts, deep DOM structures, dynamic HTML from other scripts, or images. To avoid these situations, it's always safest to wrap your script in an onload event.
Here are some examples that demonstrate this. All examples tested on Chrome 17.0.963.12 dev on OS X. Browser results may vary when not using onload, which demonstrates its unpredictable behavior. The examples return fail if the result is different than what you'd expect (i.e. what your design specifies) and return success when the result matches what you would expect. With onload they always return success.
Example 1
In this example, the code is expecting the image to be a certain width. If the code is wrapped in an onload event the width is correct, otherwise, it's not.
Demo: http://jsfiddle.net/ThinkingStiff/qUWxX/
HTML:
<div id="result"></div>
<img id='image' src="http://thinkingstiff.com/images/matt.jpg" />
Script:
document.getElementById( 'result' ).innerHTML
= document.getElementById( 'image' ).offsetWidth == 346 ? 'success': 'fail';
You'll see the jsFiddle is set to "onLoad" in the upper left corner of the page and the result above the image is success.
Change that to "onDomReady" or "no wrap (body)":
Now press "Run" at the top left of the page:
The result above the image will now be fail.
Example 2
Here is another example that doesn't use images. In this one, an inline script has been added to the HTML. The code is expecting the width to be what it was set to by the inline script. With onload it's corrent, without, it's not. Use the same instructions as before for this demo.
Demo: 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>
Script:
document.getElementById( 'result' ).innerHTML
= document.getElementById( 'style' ).style.width ? 'success' : 'fail';
Example 3
Here's an example that uses no images or Javascript in the body, just CSS. Again, the results are different between onload and not.
Demo: 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>
Script:
document.getElementById( 'result' ).innerHTML
= document.getElementById( 'style' ).clientWidth > 100 ? 'success' : 'fail';
There are just too many scenarios where not wrapping your code can cause issues that you won't be able to anticipate. To avoid these situations, it's always safest to wrap your script in an onload event.
这篇关于当代码处于底部时，'onload'是否必要？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
