window.onload、DOMContentLoaded和$(document).ready()
<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谁在下面就是谁覆盖谁,只会执行后面的那个。
window.onload、DOMContentLoaded和$(document).ready()的更多相关文章
- JS window.onload 和模拟document.ready.
hhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhh ttttttttttttt 注意观察 事件执行的 先后顺序. 总的来说,window.onload()方法是必须等到页面内包括图片的 ...
- jQuery的$(window).load与、(document).ready和window.onload的关系
jQuery的$(window).load与.(document).ready和window.onload的关系 $(function() { console.log('document.ready ...
- $(document).ready和window.onload,细微小区别,ready是jQuery的方法,onload是window的方法
$(document).ready和window.onload的区别 $(document).ready和window.onload都是在都是在页面加载完执行的函数,大多数情况下差别不大,但也是有区别 ...
- 【Python全栈-JavaScript】JavaScript的window.onload()与jQuery 的ready()的区别
JavaScript的window.onload()与jQuery 的ready()的区别 做web开发时常用Jquery中$(document).ready()和JavaScript中的window ...
- JavaScript window.onload 事件和 jQuery ready 函数有何不同?
JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片.音频.视频在内的所有外部资源都完全加载.如 ...
- Onload,Onunload,onbeforeunload,$(window).load(function() {})和$(document).ready(function(){})
Onload,$(window).load(function() {}):元素都加载完毕,才可以执行. $(document).ready(function(){}):不一定要等所有的js和图片加载完 ...
- $(window).load(function() {})和$(document).ready(function(){})的区别
JavaScript 中的以下代码 : Window.onload = function (){// 代码 } 等价于 Jquery 代码如下: $(window).load(function ( ...
- 比较body.onload(function())、$(document).ready(function())与$(windows).load(function)
原理对比: body.onload(function())是优先将document的DOM渲染,即将页面所有的元素(包括html标签以及所引用到的图片,flash媒体等媒体文件)加载完成,然后再执行页 ...
- $(window).load(function(){})跟$(document).ready(function(){})跟$(function(){})区别
1.页面DOM加载完成 2.$(document).ready(function(){}) 的简写是 $(function(){}) 执行 3.图片样式等所有HTML元素加载完毕 4.$(windo ...
随机推荐
- Android在代码中使用布局文件中的一个组件
使用前必须要把组件与其父组件的关系断开,比如有一个组件的名称为scrollChildLayout,则可以使用下面的代码进行分离 ((ViewGroup)scrollChildLayout.getPar ...
- 解决ViewPager多次刷新后重叠问题
@Override public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager) c ...
- javascript在IE/FF/Chrome的一些兼容问题
1.获取滚动条高度 var top=document.body.scrollTop||document.documentElement.scrollTop; 2.事件监听 var addEvent = ...
- javasript_数据结构和算法_栈
//-----------------------------------存储结构为数组-------------------------------------------- function St ...
- 【FPGA】【代码】资源优化,结构优化
资源优化 原始资源 定义时初始化和复位电路初始化都起作用,删除定义的初值后 将always块描述的组合逻辑变为时序逻辑后
- JS-DOM基础
1 JS-DOM 全称:document object model 1.1 获取页面元素 getElementsByTagName():无论元素的数量是多少,都会存入数组 getElement ...
- HTML 中级
abbr(表示它所包含的文本是一个更长的单词或短语的缩写形式): <p>This web site is about <abbr title="HyperText Mark ...
- linux中用户的主目录~
-在Linux中代表用户主目录 对一般用户,-表示/home/(用户名) 对于root用户,-表示/root 如果要查看-的真实面貌,可以先进入-目录,然后用pwd -P命令查看-的绝对路径 cd ~ ...
- C++中的static关键字的总结
C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作用. 1.面向过程设计中的st ...
- 笔记:linux下mysql设置utf-8编码方法
一:查看mysql版本 1.1 mysql –V 在终端界面输入上面命令.显示如下: mysql Ver 14.14 Distrib 5.5.35, fordebian-linux-gnu (x86_ ...