<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery2.js"></script>
<script language="javascript">
window.onload = haha();
function haha(){console.log(document.getElementById("div1"));}
</script>
</head>
<body>
<div id="div1">a</div>
</body>
</html>
执行结果是null。window.onload = haha(); 这样写是错误的，不需要加括号，引用不用加括号，加了括号就成了函数返回值了，在页面还没加载完就执行了，当然是null。window.onload = haha; 这样才是正确的写法。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery2.js"></script>
<script language="javascript">
window.onload = haha;
function haha(){console.log(document.getElementById("div1"));}
if(document.addEventListener){
function DOMContentLoaded(){
console.log("DOMContentLoaded");
}
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
}
</script>
</head>
<body>
<div id="div1">a</div>
</body>
</html>
在chrome、IE10和FireFox亲测，执行结果是：DOMContentLoaded然后才是onload的输出。所以说一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件。当window.onload事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。
如果你是个jQuery使用者，你可能会经常使用$(document).ready();或者$(function(){})，这都是使用了DOMContentLoaded事件。下面是官方解释：
下面三个写法是等价的：
除此之外，还需要注意的是：
//window.onload不能同时编写多个。
//以下代码无法正确执行，结果只输出第二个。
window.onload = function(){
alert("test1");
};
window.onload = function(){
alert("test2");
};
//$(document).ready()能同时编写多个
//结果两次都输出
$(document).ready(function(){
alert("Hello World");
});
$(document).ready(function(){
alert("Hello again");
});
下面我们再讨论并测试下window.onload和body中onload：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script language="javascript">
window.onload = haha;
function haha(){console.log("window.onload");}
if(document.addEventListener){
function DOMContentLoaded(){
console.log("DOMContentLoaded");
}
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
}</script>
</head>
<body onload="console.log('bodyonload');">
<div id="div1">a</div>
</body>
</html>
在IE10和FireFox下，结果为 ：说明body中的onload会覆盖window.onload
"DOMContentLoaded"
"bodyonload"
在chrome下，结果为：
DOMContentLoaded
window.onload
bodyonload
然后，如果把javascript代码移到最下面，结果又会是什么样呢？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
</head>
<body onload="console.log('bodyonload');">
<div id="div1">a</div>
</body>
</html>
<script language="javascript">
window.onload = haha;
function haha(){console.log("window.onload");}
if(document.addEventListener){
function DOMContentLoaded(){
console.log("DOMContentLoaded");
}
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
}
</script>
chrome和IE10、FireFox的结果竟然是一样的：
DOMContentLoaded
window.onload
IE10、FireFox可以理解，window.onload和body中的onload谁在下面就是谁覆盖谁，只会执行后面的那个。
相关推荐
在JavaScript和jQuery中，`$(document).ready()`和`$(window).load()`是两种常见的事件绑定函数，它们分别用于在不同的页面加载阶段执行相应的代码。理解它们的区别和执行顺序对于优化网页性能和确保脚本正确运行至...
JavaScript页面渲染完毕时间的监听是前端开发者不可或缺...通过合理选择和使用`window.onload`、`$(document).ready`或`DOMContentLoaded`事件，我们可以确保在正确的时间执行必要的操作，从而提升网页的性能和交互性。
$(document).ready()不同于window.onload。window.onload是在整个页面（包括所有的依赖资源如图片、样式表等）加载完成后才会执行。它更适合用于执行依赖于外部资源完全加载的任务，例如计算页面元素的尺寸。 #### ...
需要注意的是，jQuery的`$(document).ready()`方法可以多次使用，而且它和原生的`window.onload`并不冲突。如果两者都使用，则`window.onload`会在`$(document).ready()`之后执行。`window.onload`通常用于在页面...
总结来说，确保代码在DOM加载完成后再执行是网页开发中的基础实践，可以利用jQuery的`$(document).ready()`或者原生JavaScript的`DOMContentLoaded`和`window.onload`事件来实现这一目标。正确使用这些方法可以优化...
2. **使用jQuery的`$.load()`**：除了`$(document).ready()`，jQuery还提供了`$(window).load()`，它的行为类似于原生的`window.onload`，等待所有资源加载后再执行。 3. **使用`DOMContentLoaded`事件**：这是原生...
可以通过监听`document`对象上的`DOMContentLoaded`事件来实现自定义的`document.ready`功能。下面是一个示例代码： ```javascript document.addEventListener('DOMContentLoaded', function() { // 页面加载完成...
总结来说，JavaScript的window.onload和jQuery的$(document).ready()在处理页面加载完毕时的事件触发时机上有所不同。开发者在选择使用哪一个方法时需要根据实际情况和性能需求做出决定。对于需要页面完全加载后再...
这个方法与window.onload以及document.onload有所不同，window.onload和document.onload会等待页面中所有的资源（包括图片、样式表、子框架等）完全加载完成后才触发，而jQuery的ready方法只等待DOM树加载完成就可以...
1. `window.onload`事件：当整个页面（包括所有资源，如图片、脚本等）完全加载后，会触发`onload`事件。在`onload`事件中定义的函数会在页面加载完毕后执行，确保所有元素都可用。例如： ```javascript window....
开发者在这些高级环境中编写代码时，通常不需要直接操作window.onload或$(document).ready()。 此外，如果需要在页面加载完成后执行一些操作，但又不想阻塞页面渲染，可以考虑使用Intersection Observer API来执行...
了解这些基本的JavaScript执行机制和DOM加载流程，能帮助开发者避免`TypeError: document.getElementById(...) is null`这类常见的错误，提高代码的健壮性和用户体验。记住，良好的编程习惯和对文档结构的理解是解决...
总结来说，jQuery 的 ready() 函数和 window 的 load 事件在页面加载过程中有着明确的分工和不同的触发时机： 1. ready() 函数实现的是 DOMContentLoaded 事件，它在 DOM 结构完全加载后立即触发，而不等待其他资源...
1. `$(function(){})` 和 `$(document).ready(function(){});` 通常最早执行，因为它们在DOM准备就绪时运行。 2. `$(window).load(function(){});` 和 `window.onload = function(){};` 稍后执行，需要等待所有资源...
jQuery的ready方法并不是window.onload事件的简单封装，而是利用了现代浏览器中的DOMContentLoaded事件和针对旧版IE浏览器的一些技巧。在jQuery的实现中，ready方法会绑定DOMContentLoaded事件处理器，如果这个事件...
传统的DOMReady处理方式是使用window.onload事件或者jQuery库中的$(document).ready()方法。然而，随着前端技术的发展，现代浏览器提供了更高效、更轻量级的解决方案，例如DOMContentLoaded事件。 在"domready-...
在处理DOM时，我们经常需要等待DOM完全加载完毕后才能进行操作，这时就涉及到`jQuery`的`ready`方法和浏览器原生的`DOM.onload`事件。 `jQuery.ready`方法，通常简写为`$(document).ready`，其主要功能是在DOM准备...
- `window.onload` 等待所有资源（如图片、脚本等）加载完成，而`$(document).ready()`只需要DOM结构准备好即可执行，通常`$(document).ready()`的执行时间早于`window.onload`。 理解JavaScript中`Function`和`...
描述中提到了window.onload事件与DOMContentLoaded事件的区别。window.onload事件是等整个页面完全加载完成后才会触发，这包括所有图片、脚本、样式表、iframe等资源，通常会较晚触发，而DOMContentLoaded仅需DOM树...