您的位置：首页 > Web前端 > JavaScript

js window.onload && $(document).ready()

2017-02-13 00:00 197 查看

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="../jquery.js"></script>
</head>
<body>

</body>
</html>

<script>
/**
1  回顾 window.onload  && $().ready() 的区别
window.onload 是 js自带的方式,标志者所有的dom元素都被加载了,才会触发的,
$(document).ready() 是jquery 对window.onload 的封装.

2  2种方式的特点
1  window.onload 方法只可以被声明一次, 如果有多次声明,那么只有最后一次是生效的,
2  $(document).ready() 方法可以多次声明.

3  实际的原理
在window.onload 发生之前, 还有一个事件,  dom content loaded ,
$(document).ready() 就是模拟该事件来处理的.
**/

window.onload = function () {
console.log('This is first window onload');
}

window.onload = function () {
console.log('This is second window onload');
}

$(document).ready(function(){
console.log("this is ready first");
});

$(document).ready(function () {
console.log("this  is  ready second;")
})

$(function () {
console.log("this is ready three");
})

// output   (chrome)
/*

this is ready first
this  is  ready second;
This is second window onload

*/

/*
利用切面编程的思想(aop)来处理window.onload 可以处理多个函数的问题.
*/

function addLoadEvent(fn) {
// 保留原始的 window.onload 函数
var onload = window.onload;   // 注意,此处的是字面量, 不是一个函数的调用

if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function () {
onload();           // 字面量函数的调用
fn();
}
}
}

addLoadEvent(function () {
console.log(1);
});
addLoadEvent(function () {
console.log(2);
});
addLoadEvent(function () {
console.log(3);
});
/*
output
1
2
3

*/
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： onload & ready

相关文章推荐

新的分享

章节导航