一、JS中的window.onload
1.使用
该方法用于在网页加载完毕后立刻执行的操作,即当HTML文档加载完毕后,立刻执行某个方法。通常用于< body >元素,在页面完全载入后(包括图片、css文件等等)执行脚本代码。
//当只有一个要执行的函数时
window.onload=fn
//页面加载完毕后fn方法会被调用
//有多个要执行的函数时
window.onload=function(){
fn1()
fn2()
fn3()
}
//页面加载完毕后依次执行fn1、fn2、fn3
3.为什么要使用window.onload
JavaScript中的函数方法需要在HTML文档渲染完毕之后才可以使用,如果没有渲染完成,此时的DOM树是不完整的,这样在调用一些JavaScript代码时就可能报“undefined”错误。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>没有使用 window.onload() 测试</title>
<style type="text/css">
#bg{
width:120px;
height:120px;
border:4px solid blue;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor="#F00";
</script>
</head>
<body>
<div id="bg"></div>
</body>
</html>
//代码会抛出错误:Uncaught TypeError:Cannot read property 'style' of null
//代码是顺序执行的,当执行到js里的语句时,还没有加载div对象
//使用window.onload就可以正常运行
window.onload事件绑定事件处理函数,绑定的是一个匿名函数,也可以是一个具名函数。
二、jQuery 中的$(document).ready()
1.使用
当DOM(文档对象模型)已经加载,并且页面(包括图像)已经完全呈现时,会发生ready事件。
由于该事件在文档就绪后发生,因此把所有其他的jQuery事件和函数置于该事件中是非常好的做法。
ready()函数规定当ready事件发生时执行的代码。
ready()函数仅能用于当前文档,因此无需选择器。
2.语法
//允许一下三种语法 function 是必需的,规定当文档加载后要运行的函数
$(document).ready(function(){})
$().ready(function(){})
$(function)
三、区别
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
2.编写个数
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个。
$(documrnt).ready()可以同时编写多个,并且都可以得到执行。
3.多个的执行结果
window.onload不能同时写多个,但是有多个时会执行,只是后执行的会将前一次执行的结果覆盖。
$(doucment).ready()可以有多个,并且执行后不会被覆盖。
4.简化写法
window.onload没有简化写法
$ (document).ready(function(){})可以简写成$ (function(){})
四、注意
1.ready()函数不应与< body οnlοad="" >一起使用。
2.$ (function(){})在window.onload执行前执行的,$(function(){})类似于原生 js 中的DOMContentLoaded事件。
五、DOM文档加载步骤
1.解析HTML结构
2.加载外部的脚本和样式文件
3.解析并执行脚本代码
4.执行$(function(){})内对应代码
5.加载图片等二进制资源
6.页面加载完毕,执行window.onload